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();

      

Demo script

+1


source







All Articles