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具有用於這些交互的內置選項。

注意：請不要使用內聯樣式。