Note that there are some explanatory texts on larger screens.

plurals
  1. POdrop event doesn't fire
    primarykey
    data
    text
    <p>I'm working on a calendar. I have multiple droppables besides each other (upside down). On top of those droppables I have two draggable elements which are also resizable. Each droppable is 25px in height and 200px in width. The first draggable is 60px in height (element 1) and the other (element 2) is 20px in height. My problem is when I drag element 2 over element 1 and drop it between two droppables, the drop event doesn't fire. In all other drag and drop situations it works perfectly, the drop event fires.</p> <p>HTML (snippet off because there are a lot of these droppables):</p> <pre><code>&lt;div style="height:25px; width:200px; border-bottom:1px solid black;" class="droppable"&gt; &lt;div class="time"&gt;Kl 8:00 &lt;/div&gt; &lt;/div&gt; &lt;div style="height:25px; width:200px; border-bottom:1px solid black;" class="droppable"&gt; &lt;div class="time"&gt;Kl 8:15 &lt;/div&gt; &lt;/div&gt; </code></pre> <p>jQuery (Here I'm creating my appointments (draggables)):</p> <pre><code> appointment1 = $("&lt;div style='height: 60px; width: 150px; position: absolute; left: 508px; top: 214px;' id='drag2' class='draggable'&gt;&lt;div&gt;&lt;span class='gage1'&gt;Drag&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;"); appointment1.appendTo("#gage1"); appointment2 = $(" &lt;div class='draggable' id='drag1' style='height:20px; width:150px; position: absolute; left: 508x; top: 270px;'&gt;&lt;div&gt;&lt;span class='gage2'&gt;Drag&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;"); appointment2.appendTo("#gage2"); </code></pre> <p>And here I have my drop event:</p> <pre><code> $(".droppable").droppable({ drop: function (event, ui) { alert("drop"); } }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload