CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uidrag-and-drop
bilpor
bilpor

Reputation: 3889

Jquery stopping drop event from happening

We are using Jquery to drag and drop events. Scenario I place a user across a calender such that they may be attending on 3 days. I can then drag the user to a forth day and that would be fine. However, if I drag the user to a place where they already exist, then I can drop them here still so that it appears that they are there twice. I need to check on the drop that that person isn't already in the target area and if so then do not allow the drop to take place. In my Html page I have the following and it's the data-id element that I need to check on:

<div class="row" data-bookingid="@attendee.Id">
     <div class="col-md-12 attendee">
          <div class="col-md-8">
                   @attendee.ServiceUser.FullName
          </div>
          @if (Issues.Count > 0)
          {
             <div class="col-md-8">
                 @String.Join(", ", Issues.ToArray())
             </div>
          }
          <div class="col-md-2" style="text-align: right">
             <button class="btn btn-default icon text-file" style="background-color: transparent; border: none; padding:0;" type="button" data-id="@attendee.ServiceUser.Id"></button>
          </div>
          <div class="col-md-2" style="text-align: right">
             <button class="btn btn-default icon delete" style="background-color: transparent; border: none; padding: 0;" type="button" data-bookingid="@attendee.Id"></button>
          </div>
   </div>

The above is built up in a foreach loop with an attendee class attached. Then the attendee class is made draggable. with:

$('.attendee').parent().draggable({ revert: true });

then the droppable function has functions for accept and drop. So I need to know how to pickup the data-id of the element being dragged and then how to check this value against the items in the dropzone. Any pointers would be great.

Upvotes: 0

Views: 333

Answers (1)

epascarello
epascarello

Reputation: 207501

Should be something like this: LIsten for drop event, use the ui argument to get the reference to the element, and check the data attribute.

yourElem.droppable({
    revert: true,
    drop: function (event, ui) {
        var elem = ui.draggable;
        if (elem.data("id")==="xyz") {  //your logic here
            elem.remove();
        }
    }
});

Your if check should be something like this

if($(this).children('[data-id="' + elem.data("id")  + '"]').length)

Upvotes: 3

Related Questions