CODEWITHSUNDEEP
jquery-ui
pravin
pravin

Reputation: 1153

How to get the change the drop event target in Jquery UI Drag & Drop

I have a grid(table) with each td as droppable. Also have a div which is a draggable. When I drag the div, the selected droppable is always the td in the middle. However I would want the td to the one which is under the start of the div. How to get this ?

Use case JSFiddle

HTML

<div class="parent">
 <table border="1"></table>
 <div class="floater"></div>
</div>

JS

  var size = [10, 10]
  for(var i = 0; i< size[0]; i++) {
    var tr = $('<tr></tr>')
    for(var j = 0; j < size[1]; j++) {
      var td = $('<td></td>')
      tr.append(td)
    }
    $('.parent table').append(tr)
  }

  var dropFunc = function(event, ui) {
        $(event.target).addClass('dropped')
  }

  var overFunc = function(event, ui) {
    $(event.target).addClass('over')
  }

  var outFunc = function(event, ui) {
    $(event.target).removeClass('over')
  }
  $('td').droppable({over : overFunc, out : outFunc, drop : dropFunc})

  $('.floater').draggable()

Upvotes: 1

Views: 1080

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240858

The easiest way to achieve this is to change the droppable tolerance property to 'pointer' so that the over event is only fired when the cursor pointer overlaps the droppable element.

Then you can automatically set the position of the cursor on the draggable element to the top left by changing the cursorAt property.

Updated Example

$('td').droppable({
  over: overFunc,
  out: outFunc,
  drop: dropFunc,
  tolerance: 'pointer'
});

$('.floater').draggable({
  cursorAt: {
    top: 5,
    left: 5
  }
});

Upvotes: 1

Related Questions