Question

这似乎是一个非常烦人的错误，我一直试图解决几天。我正在制作一个可排序列表。当我点击并拖动灰色项目并将鼠标悬停在红色上方时，我需要一个垫片显示在它下面，这样我就可以将它放在新显示的间隔物中。我尝试将一个可拖动的东西绑在垫片上（所以我知道用户是否将它放在它上面）但我只是不能让垫片识别它何时有什么东西＆＃39;在它上面。 unles＆gt;＆gt;＆gt;＆gt;当我拖动并按住并将我的元素移动到屏幕的一侧时，这就是问题。

重新创建：

点击并按住灰色标签
将其拖过红色（此时黄色间隔显示）
将其拖到黄色上但不要松开鼠标（注意没有任何内容写入控制台）。

enter image description here

现在重复一下这个经验但是在越过黄色间隔物摆动之前，屏幕一侧的可拖动灰色项目现在越过黄色间隔物并且它会检测到它并向控制台写入一条消息，这意味着代码已经工作。有谁知道到底发生了什么？我已经坚持了几天！

代码：

$('.draggable').draggable({
    revert: true,
    revertDuration: 30,
    stop: function () {
        $('.spacer').removeClass('open');
        var dragged = $(this);
        dragged.css('z-index', '1000');
    },
    start: function (event, ui) {
        var dragged = $(this);
        dragged.css('z-index','1009');
    }
});

$('.hoverable').droppable({
    over: function (event, ui) {

        var target = $(event.target);

        var newElem = target.next().append('<div id="spacer" style="display:block; height:30px;width:100px;background-color:yellow;"></div>');

        newElem.on().droppable({
            over: function() {
                console.log('sdfsd');
            },
            tolerance: "touch" 
        });

    }
});

<body>

          <div class="draggable"></div>

        <div class="hoverable"></div>

        <div class="d"></div>

</body>

.draggable{
    width:100px;
    height:30px; 
    background-color:gray;

}

.hoverable{
    width:100px;
    height:30px; 
    background-color:red;

}

.spacer{
    width:100px;
    height:30px; 
    background-color:yellow;

}

JsBin在这里......

http://jsbin.com/golel/1/

Answer 1

您的代码存在的问题是您对$('.draggable').draggable()和$('.hoverable').droppable()的调用是在当前DOM上发生的，因此这些函数不会在新的DOM元素上执行。你不知何故需要在新元素上触发这些函数。（如果您只担心动态放置区域，则可以忽略draggable()调用的此方面。）

这是我的意思的一个例子：

function makeDroppable(selector) {
  $(selector).droppable({
    over: function (event, ui) {
      var target = $(event.target);
      var newElem = target.next().append('<div id="spacer" style="display:block; height:30px;width:100px;background-color:yellow;"></div>');

      makeDroppable(newElem);
    }
  });
}

makeDroppable('.hoverable');

Droppable没有足够快地附加到Jquery中动态生成的元素

1 个答案: