Question

下午好！我主要是一个php程序员，并不熟悉javascript或jquery，我真的希望有人可以帮助我。我正在尝试通过一个小小的拖放计划项目动态学习我正在建设工作，但我觉得我缺乏知识导致我一起破解这一切。我基本上为每个工作显示一个无序列表，一个用于员工，一个用于卡车，一个用于设备。我们的目标是让从事这项工作的员工投入工作，并为他们开车上班的卡车或他们在工作中使用的设备而黯然失色。我所遇到的麻烦，并且由于缺乏适当的术语而原谅我，当雇员被裁掉工作时，它并不是真正的＆＃34;真实的＆＃34;元件。当我尝试删除它或将卡车放到员工上时（以编程方式哈哈），它失败了，因为id（或者＃34; data-empID＆＃34;在这种情况下）是未定义的并且没有传递给我的PHP脚本。但是，如果我刷新页面并点击删除它工作正常，因为数据源自页面加载。如何在元素被删除时这样做，它就好像它已经被页面的其余部分加载，所以我可以从作业中删除它，复制它来放置多个作业，或者移动它到另一份工作？

这是一个截图：

以下是我正在处理的代码：

$(".source li").draggable({ 
    helper: "original",
    revert: "invalid",
    scroll: true,
    start: function( event, ui ) {
        theID = $(this).prop("id");
        $(this).addClass("used_source");
    },
    end: function( event, ui){
        $(this).addClass("targeted");
    }
});

$(".target").droppable({
    addClasses: false,
    activeClass: "listActive",
    accept: ".employeeTarget",
    drop: function(event, ui) {
        var ths = $(this);
        var src = $(this).closest("ul").prop("id");
        var emp = ui.draggable.attr("data-empID");
        var jobDate = getParameterByName("d");
        $('[data-empID="'+emp+'"]').draggable({ helper:"clone" });

        $.ajax ({
            url: "assets/php/data.php",
            type: "GET",
            data: {type:'employee', job: src, employee: emp, date: jobDate},
            success: function(data){ 
                console.log(data);
                if(data == 'failed'){
                    $(ui.helper).remove();        
                    alert("Employee is already listed on this job.");
                }else{
                    var link = $("<a href='#' class='dismiss'>x</a>");
                    var list = $("<li></li>").text(ui.draggable.text());
                    $(ths).find(".placeholder").remove();    
                    $(ui.helper).remove();
                    $(list).append(link);
                    $(list).appendTo(ths);
                    $(this).find('ul').append(ui.draggable);
                    $('[data-empID="'+emp+'"]').addClass(".employeeTarget");
                    $(".employeeTarget").draggable({ 
                        helper: "original",
                        revert: "invalid",
                        scroll: true,
                        start: function( event, ui ) {
                            theID = $(this).prop("id");
                            $(this).addClass("used_source");
                        },
                        end: function( event, ui){
                            $(this).addClass("targeted");
                        }
                   });
                }
             },
             error: function(req, err){ console.log(err); alert(data);}
         });
      }
}).on("click", ".dismiss", function(event) {
    event.preventDefault();
    var em = $(this).parent().attr("data-empID");
    var par = $(this).parent().text();
    var emName = $(this).parent().text();
    var empName = emName.slice(0,-1);
    var jb = $(this).closest("ul").prop("id");
    var jobDate = getParameterByName("d");
    $(this).parent().remove();
    $.ajax({ 
        url: "assets/php/remove.php",
        type: "POST",
        data: {type: 'employee', job: jb, employee: em, date: jobDate},
        success: function(data){ 
            console.log(data);
            if(data == 'FAILED!'){      
                alert("Employee has not been removed.");
            }else if(data == 'RESET!'){
                console.log(em);
                $(".source").append('<li class="list-group-item employeeTarget" id="" data-empID="' + em + '">' + empName + '</li>');
                $('[data-empID="'+em+'"]').draggable();
                $('[data-empID="'+em+'"]').addClass(".source");

            }
        },
        error: function(req, err){ console.log(err); alert(data);}
    });
});

我的列表如下所示：

<ul>';
    <li class="list-group-item employeeTarget" data-empID="1">Employee One</li>
    <li class="list-group-item employeeTarget" data-empID="1">Employee Two</li>
    <li class="list-group-item employeeTarget" data-empID="1">Employee Three</li>
</ul>

<ul>
<li class="list-group-item vehicle" data-eqID="0" data-vID="50">Truck 50</li>
<li class="list-group-item vehicle" data-eqID="0" data-vID="103">Truck 103</li>
</ul>

<ul>
    <li class="list-group-item vehicle" data-vID="0" data- eqID="32">Excavator</li>
    <li class="list-group-item vehicle" data-vID="0" data- eqID="24">Backhoe</li>
</ul>

正如我之前提到的，我对javascript或jquery不是很熟练，而且我确信你们中的一些人可以用不到一半的代码来编写代码。我也确信这是一种更有效的方法来实现这一目标。基本上，当员工被添加到工作岗位时，＆＃34; X＆＃34;如果需要，将附加到名称以删除员工。加载页面时，如果没有列出员工，则会在添加员工时删除占位符节点。我还需要制作员工的副本，如果他们当天通过将员工再次拖到另一个工作来处理多个工作，但我可以稍后解决。

我没有为＆＃34; connectwith＆＃34;而烦恼。选项还没有，因为我熟悉这一点，而且我在尝试推进之前先尝试使用它。为了解决这个问题，我已经搜索了很多东西但是还没有成功。我不确定是否有办法让被删除的元素继承属性，就好像它在页面加载时一样，或者如果我认为这一切都错了。任何帮助都非常感谢，即使这是一个重复的＆＃34;发布，有人可以指出我正确的答案。在此先感谢您的帮助！

如何使jquery删除元素droppable并继承原始属性

0 个答案: