CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
IlludiumPu36
IlludiumPu36

Reputation: 4304

JQuery - Disable draggable element based on data selector

I have an appended draggable element which has a dynamic value for attribute data-pin:

var pin = 0;

$('#pins').append("<div class='pin' data-pin=" + pin + "></div>");

$('*[data-pin=' + pin + ']').draggable({
  stack: '#pins div',
  revert: false
});

When the element is dragged onto the droppable, a new draggable element is appended as before:

$('#drop_box').droppable({
  drop: function (event, ui) {
  pin ++;
  $('#pins').append("<div class='pin' data-pin=" + pin + "></div>");
  $('*[data-pin=' + pin + ']').draggable({
  stack: '#pins div',
  revert: false
});
}
});

Now, I want to disable draggable on the dropped element, and allow the newly appended element to be draggable, and so on. How can I do this?

I would also like to have the newly appended elements to be in the same spot in the container div, rather than appearing after the previous elements space in the div. Can this be done?

See fiddle at http://jsfiddle.net/h573y2wa/3/

Upvotes: 0

Views: 89

Answers (1)

ventaur
ventaur

Reputation: 1851

Here is a solution that uses clones, and sets the data-pin attribute after dropping. You can see I'm only using the one pin as draggable and cloning what's needed.

var pin = 0;

$('<div class="pin"></div>').appendTo('#pins').draggable({
    appendTo: '#drop_box',
    helper: 'clone',
    stack: '#drop_box .pin',
    revert: false
});

$('#drop_box').droppable({
    drop: function (event, ui) {        
        ui.helper.clone().attr('data-pin', pin).appendTo(this);
        pin++;
    }
});

http://jsfiddle.net/snvsdkas/1/

Upvotes: 1

Related Questions