How to use jquery ui '.droppable' with jquery '.on' function?

Question

I have three div 1, 2 and 3 within a main div ie:

<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>

Now, I want to append a dragged <div class="other"></div> after any of a <div> with class 'bnr', append then, when I drop on 'placeholder'. ie when I mouse over on any of these three <div> , it shows a 'placeholder' in between. like I am mouse hovering on <div> 1 and it will show a placeholder <div> in between <div> 1 and <div> 2 .

Placeholder is like:

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

I have concluded with my try that I have to use '.droppable' function property 'over', 'out' and 'drop', instead of using, jquery's .mouseenter and .mouseleave functions.

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

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

            },
            out: function (event, ui) {

            },
            drop: function (event, ui) {

            }
        });

How can I drop on 'placeholder' div?

Because its created after mouseover. So from here '.on' function comes into play. Now tell me how I can use '.droppable' with '.on' or help me to find any other solution.

Answer 1

here is a sample code:

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

see working demo: http://jsbin.com/hoyonugupu/edit?html,js,output

Answer 2

It looks like you're looking for a draggable which is connected to sortable widget having custom placeholder via connectToSortable option:

 $('#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> 

No need to manually inject elements and stuff, jQuery UI has inbuilt options for these interactions.

Side note: Please don't use inline styles.