Question

我有一些可拖动的元素我有一些掉落的字段，我可以轻松地将元素放入可放置的区域。但是无法将元素从一个丢弃的字段中删除到另一个

这是Jsfiddle Demo

看小提琴如何运作

点击添加div两次以添加两个灰色div
将绿色div拖到第一个灰色div，它可以正常工作
当您尝试将绿色元素从第一个灰色div拖到第二个灰色div时，您无法执行此操作，这是错误

这是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();
    });
});

Answer 1

通过改变解决了自己

$(".droppedFields").sortable({
            start: function () {
                $('.selectorField').addClass('is_sort');
            }
        }).disableSelection();

要

  $(".droppedFields").sortable({
                start: function () {
                    $('.selectorField').addClass('is_sort');
                }, 
           connectWith: ".droppedFields"
            }).disableSelection();

Demo Fiddle

无法删除已删除字段之间的元素

1 个答案: