Drag and drop a div tag on grids row with jQuery widgets

Question

I try to drag a div on a grids system rows, and to find out on witch rows he is positioned after is drop it:

https://jsfiddle.net/johnidevo/08f83op9/5/

________________________________________________
droppable_area_(grids)__________________________
1row____________________________________________
2row____________________________________________
3row___-----------------------------------------
4row___| draggable <div>                       |
5row___|                                       |
6row___-----------------------------------------
7row____________________________________________
(<div>'s)_______________________________________

My code is as follow:

jQuery( object ).draggable({                        
    snap: ".selectable",
    containment: "#droppable_area",
    axis: "y",
    drag: function( event, ui ){
        console.log( jQuery( this ).parent() );
    }
});

jQuery('.selectable').droppable({
    drop: function( event, ui ) {
        console.log( jQuery( this ) );
    }
});

With console.log( jQuery( this ) ); when draggable <div> is only one row height size it's work fine, after if is bigger than 1 row size it's fails why?

Answer 1

What's happening is not an error IMO. I changed the size of the 'draggable' element to match the height of the 'droppable' elements, and then correct event.target.id is selected. I think the problem is when the 'draggable' height is larger than the 'droppabe' height. The draggable is covering more than one droppable element, and at this point, there are multiple event.target.id's being covered. If I were you, I would rethink how I'm approaching the task. Also, maybe there is jquery plugin you can try that has already solved this.

To show this, I added a ".moveable" class to the draggable element, and gave it aa height of 20px, and I gave the same height to the ".selectable" elements. As expected, the correct ID is displayed.

I have an unreliable solution that may help you figure something out - use the droppable tolerance : "pointer" option, demonstrated with a draggable height of 40px and droppable height of 20px. This isn't reliable though, as you would always need to grab the draggable at the very bottom or very top of the element - but this might help you find a way or rethink your approach. Good luck!

 $(document).ready(function() { $(".moveable").draggable({ snap: ".selectable", containment: "#day_kalendar", axis: "y", drag: function( event, ui ){ //console.log( event.target.id ); } }); $(".selectable").droppable({ drop: function( event, ui ) { $("#response").text(event.target.id); console.log(this.id); //var hfrom=$( this ).attr("data-hour"); //var hto=$( this ).attr("data-nexthour"); //$("#1463419359713").children("#eventHours").text( hfrom+" - "+hto ); }, over: function( event, ui) { //console.log(event, ui); }, tolerance: "pointer" }); }); 

 .ui-selectable .ui-selected { background-color: #a6c9e2; } .ui-selectable .ui-selecting { background: #FECA40; } .ui-selectable-helper { position: absolute; z-index: 100; border: none; } .ui-dialog-titlebar { background: transparent; border: none; } [class*="col-"] { float: left; padding: 0px; } .col-1 { width: 8.33%; } .col-2 { width: 16.66%; } .col-3 { width: 25%; } .col-4 { width: 33.33%; } .col-5 { width: 41.66%; } .col-6 { width: 50%; } .col-7 { width: 58.33%; } .col-8 { width: 66.66%; } .col-9 { width: 75%; } .col-10 { width: 83.33%; } .col-11 { width: 91.66%; } .col-12 { width: 100%; } .row::after { content: ""; clear: both; display: block; } .text-right { text-align: right; } .cornsilk { background-color: #E0E0E0; } .forestgreen { background-color: forestgreen; } .limegreen { background-color: limegreen; } .dimgrey { background-color: dimgrey; color: white; } .border-up { border-top: 1px solid white; } .border-up-dashed { border-top: 1px dashed white; } .fix-border { border-top: 1px solid dimgrey; } .newevent { position: absolute; top: 0; left: 0; margin: 0px; width: 100%; height: auto; z-index: 1; /*opacity: 0.7;*/ border-radius: 4px; } #console { margin-top: 10px; font-size: 9px; background-color: white; padding: 10px; } .selectable { position: relative; margin:0; padding:0; height: 20px; } .moveable { padding:0; margin:0; height: 40px; } #response { height: 20px; } 

 <script src="https://code.jquery.com/jquery.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div id ="mainContainer"> <div class="container"> <div id="day_kalendar" class="ui-selectable"> <div class="row border-up"> <div class="col-1 dimgrey text-right"><span>10AM</span></div> <div id="a1" data-hour="10 am" data-nexthour="10:30 am" class="col-11 cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div class="row"> <div class="col-1 dimgrey fix-border">&nbsp;</div> <div id="a2" data-hour="10:30 am" data-nexthour="11 am" class="col-11 border-up-dashed cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div class="row border-up"> <div class="col-1 dimgrey text-right"><span>11AM</span></div> <div id="a3" data-hour="11 am" data-nexthour="11:30 am" class="col-11 cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div class="row"> <div class="col-1 dimgrey fix-border">&nbsp;</div> <div id="a4" data-hour="11:30 am" data-nexthour="12 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div class="row border-up"> <div class="col-1 dimgrey text-right"><span>12PM</span></div> <div id="a5" data-hour="12 pm" data-nexthour="12:30 pm" class="col-11 cornsilk selectable ui-selectee"> <span>&nbsp;</span> <div id="a1463419359713" class="newevent moveable ui-draggable forestgreen" style=""> <span id="eventHours">12 pm - 2 pm</span> <span id="eventTitle">(No title)</span> <div class="ui-resizable-handle ui-resizable-s"></div> </div> </div> </div> <div class="row"> <div class="col-1 dimgrey fix-border">&nbsp;</div> <div id="a6" data-hour="12:30 pm" data-nexthour="1 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div class="row border-up"> <div class="col-1 dimgrey text-right"><span>1PM</span></div> <div id="a7" data-hour="1 pm" data-nexthour="1:30 pm" class="col-11 cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div class="row"> <div class="col-1 dimgrey fix-border">&nbsp;</div> <div id="a8" data-hour="1:30 pm" data-nexthour="2 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div class="row border-up"> <div class="col-1 dimgrey text-right"><span>2PM</span></div> <div id="a9" data-hour="2 pm" data-nexthour="2:30 pm" class="col-11 cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div class="row"> <div class="col-1 dimgrey fix-border">&nbsp;</div> <div id="a10" data-hour="2:30 pm" data-nexthour="3 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div class="row border-up"> <div class="col-1 dimgrey text-right"><span>3PM</span></div> <div id="a11" data-hour="3 pm" data-nexthour="3:30 pm" class="col-11 cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div class="row"> <div class="col-1 dimgrey fix-border">&nbsp;</div> <div id="a12" data-hour="3:30 pm" data-nexthour="4 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div class="row border-up"> <div class="col-1 dimgrey text-right"><span>4PM</span></div> <div id="a13" data-hour="4 pm" data-nexthour="4:30 pm" class="col-11 cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> </div> </div> </div> <div id="response"> </div> 

Answer 2

Try using 'event.target.id' to identify which row it was dropped on.

jQuery('.selectable').droppable({
    drop: function( event, ui ) {
        console.log( event.target.id );
    }
});

Also, I noticed that your row ID names start with a number, and that could cause problems. Try renaming them to words (id="one" or id="row1", id="row2"..)

Answer 3

For now I will use this code until later versions!

 jQuery(document).ready(function() { var target; jQuery('#1463419359713').draggable({ snap: ".selectable", containment: "#day_kalendar", axis: "y", cursor: "crosshair", cursorAt: { top: 0 } }); jQuery('.selectable').droppable({ tolerance: "pointer", drop: function(event, ui) { var wrapper = jQuery(event.target).parent().attr("id"); var eventHeight = jQuery('#1463419359713').height() / (jQuery(".selectable:first").height() + 1); var starthour = jQuery(event.target).attr("data-hour"); var nexthour = parseInt(wrapper) + Math.round(eventHeight); nexthour = jQuery('#' + nexthour + ' div:nth-child(2)').attr("data-hour"); jQuery('#1463419359713').children('#eventHours').text(starthour + ' - ' + nexthour); } }); }); 

 .ui-selectable .ui-selected { background-color: #a6c9e2; } .ui-selectable .ui-selecting { background: #FECA40; } .ui-selectable-helper { position: absolute; z-index: 100; border: none; } .ui-dialog-titlebar { background: transparent; border: none; } [class*="col-"] { float: left; padding: 0px; } .col-1 { width: 8.33%; } .col-2 { width: 16.66%; } .col-3 { width: 25%; } .col-4 { width: 33.33%; } .col-5 { width: 41.66%; } .col-6 { width: 50%; } .col-7 { width: 58.33%; } .col-8 { width: 66.66%; } .col-9 { width: 75%; } .col-10 { width: 83.33%; } .col-11 { width: 91.66%; } .col-12 { width: 100%; } .row::after { content: ""; clear: both; display: block; } .text-right { text-align: right; } .cornsilk { background-color: #E0E0E0; } .forestgreen { background-color: forestgreen; } .limegreen { background-color: limegreen; } .dimgrey { background-color: dimgrey; color: white; } .border-up { border-top: 1px solid white; } .border-up-dashed { border-top: 1px dashed white; } .fix-border { border-top: 1px solid dimgrey; } .selectable { position: relative; } .newevent { position: absolute; top: 0; left: 0; margin: 0px; width: 100%; height: auto; z-index: 1; /*opacity: 0.7;*/ border-radius: 4px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script> <div id="day_kalendar" class="ui-selectable"> <div id="1" class="row border-up"> <div class="col-1 dimgrey text-right"><span>10AM</span> </div> <div data-hour="10 am" data-nexthour="10:30 am" class="col-11 cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div id="2" class="row"> <div class="col-1 dimgrey fix-border">&nbsp;</div> <div data-hour="10:30 am" data-nexthour="11 am" class="col-11 border-up-dashed cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div id="3" class="row border-up"> <div class="col-1 dimgrey text-right"><span>11AM</span> </div> <div data-hour="11 am" data-nexthour="11:30 am" class="col-11 cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div id="4" class="row"> <div class="col-1 dimgrey fix-border">&nbsp;</div> <div data-hour="11:30 am" data-nexthour="12 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div id="5" class="row border-up"> <div class="col-1 dimgrey text-right"><span>12PM</span> </div> <div data-hour="12 pm" data-nexthour="12:30 pm" class="col-11 cornsilk selectable ui-selectee"> <span>&nbsp;</span> <div id="1463419359713" class="newevent ui-draggable forestgreen" style="height: 92px;"><span id="eventHours">12 pm - 2 pm</span> <br><span id="eventTitle">(No title)</span> <div class="ui-resizable-handle ui-resizable-s"></div> </div> </div> </div> <div id="6" class="row"> <div class="col-1 dimgrey fix-border">&nbsp;</div> <div data-hour="12:30 pm" data-nexthour="1 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div id="7" class="row border-up"> <div class="col-1 dimgrey text-right"><span>1PM</span> </div> <div data-hour="1 pm" data-nexthour="1:30 pm" class="col-11 cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div id="8" class="row"> <div class="col-1 dimgrey fix-border">&nbsp;</div> <div data-hour="1:30 pm" data-nexthour="2 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div id="9" class="row border-up"> <div class="col-1 dimgrey text-right"><span>2PM</span> </div> <div data-hour="2 pm" data-nexthour="2:30 pm" class="col-11 cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div id="10" class="row"> <div class="col-1 dimgrey fix-border">&nbsp;</div> <div data-hour="2:30 pm" data-nexthour="3 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div id="11" class="row border-up"> <div class="col-1 dimgrey text-right"><span>3PM</span> </div> <div data-hour="3 pm" data-nexthour="3:30 pm" class="col-11 cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div id="12" class="row"> <div class="col-1 dimgrey fix-border">&nbsp;</div> <div data-hour="3:30 pm" data-nexthour="4 pm" class="col-11 border-up-dashed cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> <div id="13" class="row border-up"> <div class="col-1 dimgrey text-right"><span>4PM</span> </div> <div data-hour="4 pm" data-nexthour="4:30 pm" class="col-11 cornsilk selectable ui-selectee"> <span>&nbsp;</span> </div> </div> </div>