javascript-如何在jQuery'.on'函数中使用jQuery UI .droppable？

Question

我在主div中有三个div 1、2和3，即：

<div id="main">
    <div style="height:30px; background-color:yellow;" class="bnr">Banner</div>
    <div style="height:30px; background-color:yellow;" class="bnr">Banner2</div>
    <div style="height:30px; background-color:yellow;" class="bnr">Banner3</div>
</div>

现在，我想追加一个拖<div class="other"></div>后的任何一个的<div>与类“BNR”，追加然后，当我在“占位符”下降。 即，当我将鼠标悬停在这三个<div>任何一个上时，它在两者之间显示一个“占位符”。 就像我将鼠标悬停在<div> 1 ，它将在<div> 1和<div> 2之间显示一个占位符<div> 。

占位符如下：

<div style="height:30px; background-color:light-yellow;" class="placeholder"></div>

我的尝试得出的结论是，必须使用'.droppable'函数属性'over'，'out'和'drop'，而不是使用jquery的.mouseenter和.mouseleave函数。

$(".other").draggable({
   helper: 'clone'
});

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

            },
            out: function (event, ui) {

            },
            drop: function (event, ui) {

            }
        });

如何放置“占位符” div？

因为它是在鼠标悬停后创建的。 因此，从这里开始，“。on”功能开始起作用。 现在告诉我如何将'.droppable'与'.on'结合使用或帮助我找到其他解决方案。

Answer 1

这是一个示例代码：

$(".other").draggable({
   helper: 'clone'
 });

$('.bnr').droppable({
        over: function (event, ui) {
          $('.placeholder').remove();
          $('<div style="height:30px; background-color:light-yellow;"    class="placeholder"></div>').insertAfter(this);

        },
        out: function (event, ui) {

        },
        drop: function (event, ui) {
              $('.placeholder').remove();
              $(".other").insertAfter(this);  
        }
});

参见工作演示： http : //jsbin.com/hoyonugupu/edit?html,js，输出

Answer 2

看起来您正在寻找可拖动对象，该对象通过connectToSortable选项连接到具有自定义placeholder 可排序小部件：

 $('#main').sortable({ placeholder: 'placeholder' }); $('.draggable').draggable({ helper: 'clone', connectToSortable: '#main' }); 

 #main { margin-bottom: 50px; } #main div.bnr { height: 30px; background-color: yellow; } .placeholder { visibility: visible; height: 30px; background-color: orange; } .draggable { width:100%; height: 30px; background: dodgerblue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div id="main"> <div class="bnr">Banner</div> <div class="bnr">Banner2</div> <div class="bnr">Banner3</div> </div> <div class="draggable">Drag Me</div> 

无需手动注入元素和东西，jQuery UI具有用于这些交互的内置选项。

注意：请不要使用内联样式。