jquery ui '.droppable'とjquery '.on'関数の使い方は？

Question

私はdiv要素すなわちメイン内の3つの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> 

を、私は私がドロップすると、その後、追加し、クラスのBNR 'で<div>のいずれかの後にドラッグ<div class="other"></div>を追加したいです「プレースホルダ」にすなわち、これらの3つのいずれかにマウスを重ねると、その間に「プレースホルダー」が表示されます。私はマウスが<div> 1にマウスを乗せているように、<div> 1と<div> 2の間にプレースホルダー<div>を表示します。私が代わりに、使用してjQueryので、私の私は 『オーバー』「.droppable」関数のプロパティを使用する必要がしようとすると、 『アウト』と 『ドロップ』で締結している

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

：よう

プレースホルダです。マウスセンターと.mouseleave関数。

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

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

      }, 
      out: function (event, ui) { 

      }, 
      drop: function (event, ui) { 

      } 
     }); 

「プレースホルダ」の部分を削除するにはどうすればよいですか？

マウスオーバー後に作成されるためです。だから、ここから '.on'関数が出てきます。今、 '.dot'を '.on'と一緒に使ったり、他の解決法を見つける手助けをする方法を教えてください。ここ

Answer 1

はサンプルコードです：あなたはconnectToSortableオプションを使用してカスタムplaceholderを持つsortableウィジェットに接続されているドラッグを探しているように見えますhttp://jsbin.com/hoyonugupu/edit?html,js,output

Answer 2

：

$(".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); 
     } 
}); 

は、作業のデモを参照してください

$('#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には、これらの相互作用のオプションが組み込まれています。

サイドノート：インラインスタイルは使用しないでください。