Question

我有一个可拖动元素和一个具有两个静态放置区域的div：

<img id="dragimage"  src="_images/image.png"  >

<div class="lines">
    <div class="dropzone" style="height:100px;width:100px;border:1px solid black">this is a dropzone</div>
    <div class="dropzone" style="height:100px;width:100px;border:1px solid black">this is a dropzone</div>
</div>
<script>
    $(function  () {
        $("#dragimage").draggable();

        $(".dropzone").droppable({
            drop: function(event,ui){
                alert('dropped');
            }
    });
</script>

我有一个按钮，可以动态添加其他放置区域。我将“ ui-droppable”类添加到动态放置区，因为调用.droppable（）会将该类自动添加到任何静态可放置元素中。

function AddLine()
{
    var linecount = $("#linecount").val();
    var linediv = $(".lines").html();

    linecount++;
    $("#linecount").val(linecount);
    linediv += '<div  class="dropzone ui-droppable " style="height:75px;width:100%;border:1px solid black">New Drop Zone ' + linecount + '</div>';
    $(".lines").html(linediv);
}

当我在添加任何动态放置区域之前将可拖动元素放置到静态放置区域之一时，每次都会收到警报，而没有任何困难。

当我添加一个或多个动态放置区时，即使对于原始的静态放置区，放置事件也不会再次触发。

有什么建议吗？

Answer 1

我在This的帮助下找到了答案

上面的AddLine方法现在是这样：

function AddLine()
{
    var linecount = $("#linecount").val();
    var linediv = $(".lines").html();

    linecount++;

    $("#linecount").val(linecount);

    var newline = $('<div  class="dropzone ui-droppable" class="ui-droppable" style="height:75px;width:100%;border:1px solid black">New Drop Zone ' + linecount + '</div>').appendTo(".lines");

    newline.droppable(      {
        drop: function(event,ui)
        {
            alert('dropped'+linecount);
        }
    });

}

创建动态DIV会中断JQuery-UI Droppable

1 个答案: