javascript – 不同div元素中的jQuery UI交换元素

2019年8月4日 136次阅读

我要做的是交换不同div元素中的元素.这是我的代码：
JSfiddle

每个div只能有一个丢弃的元素.如果drop_ div已经删除了元素并且dropable -able元素从#tire_deck中删除,那么它必须被拒绝.如果元素从其他div中删除,则必须交换它.任何人都可以帮助我实现这一目标吗？

最佳答案 我开始的方式是在拖动开始时存储可拖动的父母,然后我们确定我是否会交换孩子或停止事情.

这是小提琴：

http://jsfiddle.net/vvn5S/

和javascript：

        $(function () {
            var origin;
            $(".tire").draggable({
                appendTo: "body",
                cursor: "move",
                helper: 'clone',
                revert: "invalid",
                start: function (event, ui) {
                    origin = event.target.parentNode;
                }
            });
            $("#tire_deck").droppable({
                tolerance: "intersect",
                accept: ".tire",
                activeClass: "ui-state-default",
                hoverClass: "ui-state-hover",
                drop: function (event, ui) {
                    $("#tire_deck").append($(ui.draggable));
                }
            });
            $(".drop_1, .drop_2, .drop_3, .drop_4, .drop_5, .drop_6").droppable({
                tolerance: "intersect",
                accept: ".tire",
                drop: function (event, ui) {
                    if (this.children.length == 0) {
                        $(this).append($(ui.draggable));
                    } else {
                        if (origin.id !== "tire_deck") {
                            event.stopPropagation();
                            var copyNode = $(this).children().detach();
                            $(this).append($(ui.draggable));
                            $(origin).append(copyNode);
                        } else {
                            alert("Stopped!");
                        }
                    }
                }
            });
        });
点赞