Unable to delete items between dropped fields
I have some draggable items I have some dropped fields, I can easily delete items in a deleteable area. But it is impossible to remove items from one dropped field to another
Here is a Jsfiddle Demo
To see how it works
- click on add div twice to add two gray divs
- drag the green div to the first gray div, it works fine
- when you try to drag green elements from the first gray div to the second gray div you can't do that, it is an error
Here is JQuery
$(function () {
$(".selectorField").draggable({
containment: $('body'),
helper: "clone",
stack: "div",
cursor: "move",
cancel: null
});
function makeDraggable($sel) {
$sel.draggable({
containment: $('.droppedFields'),
cursor: "move",
});
$sel.find('.resize_box').resizable({
handles: {
'e': '.ui-resizable-e'
}
});
}
var i = 1;
$("#AddSec").click(function () {
$("<div />", {
"class": "wrapper"
})
.append($('<span />', {
"class": "DelSection",
"data-target": "#Section" + i
}).html('(-)Remove'))
.appendTo("#data");
$("<div />", {
"class": "SecStyle",
id: "Section" + i
})
.append($("<div/>").attr('class', 'well droppedFields').droppable({
accept: ":not(.not_clone)",
drop: function (event, ui) {
var draggable = ui.draggable;
draggable = draggable.clone();
draggable.addClass('not_clone');
draggable.appendTo(this);
$(ui.draggable).hide();
draggable.click(function (e) {
if ($(this).hasClass('is_sort')) {
$('.selectorField').removeClass('is_sort');
e.preventDefault();
return;
}
if (!$(e.target).is('.ui-resizable')) {
// alert("First");
$(this).remove();
$(ui.draggable).show();
}
});
}
}).resizable({
handles: 'e'
}))
.appendTo("#data");
$(".droppedFields").sortable({
start: function () {
$('.selectorField').addClass('is_sort');
}
}).disableSelection();
i++;
});
var is_sort = false;
//delete the columns from section
//delete the section
$("#data").on('click', '.DelSection', function () {
var targetSection = $(this).data('target');
$(targetSection).remove();
$(this).parent().remove();
});
});
+3
source to share
1 answer
I decided myself by changing
$(".droppedFields").sortable({
start: function () {
$('.selectorField').addClass('is_sort');
}
}).disableSelection();
For
$(".droppedFields").sortable({
start: function () {
$('.selectorField').addClass('is_sort');
},
connectWith: ".droppedFields"
}).disableSelection();
+1
source to share