0

div クラス ギャラリーがあり、ドロップ可能な div が 2 つあり、あるドロップ可能な div から別のドロップ可能な div に要素をドラッグする際に問題があります。ドロップ要素を他のドロップ可能な div にドラッグすると、常にそのドロップ可能な div に戻ります。誰か助けてくれませんか？誰？

ここに私のサンプルコードと jsFiddle があります: http://jsfiddle.net/2n0bevxo/159/

コード：

CSS:

#gallery {
float: left;
width: 65%;
min-height: 11em;
}
.gallery.custom-state-active {
background: #eee;
}
.gallery li {
float: left;
width: 96px;
padding: 0.10em;
margin: 0 0.4em 0.4em 0;
}
.gallery li img {
width: 100%;
cursor: move;
}
#trash {
float: left;
width: 32%;
min-height: 10em;
padding: 1%;
display: block;
margin: 0.3em;
}
#trash2 {
float: left;
width: 32%;
min-height: 10em;
padding: 1%;
display: block;
margin: 0.3em;
}
h1 {
font-size: 1em;
text-align: center;
}

js:

$(function () {
// variable
var $gallery = $("#gallery"),
    $trash = $("#trash");

$("li", $gallery).draggable({
    revert: "invalid", //
    helper: "clone",
    cursor: "move"
});

$('#trash').droppable({
    accept: "#gallery > li, #trash2 > ul > li",
    activeClass: "ui-state-highlight",
    drop: function (event, ui) {
        deleteImage(ui.draggable);
    }
});

var recycle_icon = "<a    href='link/to/recycle/script/when/we/have/js/off'</a>";

function deleteImage($item) {
    $item.fadeOut(function () {
        var $list = $("ul", $trash).length ? $("ul", $trash) : $("<ul class='gallery ui-helper-reset'/>").appendTo($trash);

        $item.find("a.ui-icon-trash").remove();
        $item.append(recycle_icon).appendTo($list).fadeIn(function () {
            $item.animate({
                width: "48px"
            })
                .find("img")
                .animate({
                height: "36px"
            });
        });
    });
}
});

$(function () {
// variable
var $gallery = $("#gallery"),
    $trash2 = $("#trash2");

$("li", $gallery).draggable({
    revert: "invalid", // 
    helper: "clone",
    cursor: "move"
});

$('#trash2').droppable({
    accept: "#gallery > li, #trash > ul > li",
    activeClass: "ui-state-highlight",
    drop: function (event, ui) {
        deleteImage(ui.draggable);
    }
});

var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off'</a>";

function deleteImage($item) {
    $item.fadeOut(function () {
        var $list2 = $("ul", $trash2).length ? $("ul", $trash2) : $("<ul class='gallery ui-helper-reset'/>").appendTo($trash2);

        $item.find("a.ui-icon-trash").remove();
        $item.append(recycle_icon).appendTo($list2).fadeIn(function () {
            $item.animate({
                width: "48px"
            })
                .find("img")
                .animate({
                height: "36px"
            });
        });
    });
}
});

html:

<div class="ui-widget ui-helper-clearfix">
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
    <li class="ui-widget-content ui-corner-tr">
        <img src="http://placehold.it/140x100" width="96" height="72">
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <img src="http://placehold.it/140x100" width="96" height="72">
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <img src="http://placehold.it/140x100" width="96" height="72">
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <img src="http://placehold.it/140x100" width="96" height="72">
    </li>
    <li class="ui-widget-content ui-corner-tr">
        <img src="http://placehold.it/140x100" width="96" height="72">
    </li>
</ul>
</div>
<div id="trash" class="ui-widget-content">
 <h1 class="ui-widget-header">Disagree</h1>

</div>
<div id="trash2" class="ui-widget-content">
 <h1 class="ui-widget-header">Agree</h1>

</div>
4

1 に答える 1

1

変更する必要がありますaccept(例http://jsfiddle.net/2n0bevxo/166/ ):

$('#trash').droppable({
    accept: "#gallery > li,#trash2 > ul > li",
    activeClass: "ui-state-highlight",
    drop: function (event, ui) {
        deleteImage(ui.draggable);
    }
});

$('#trash2').droppable({
    accept: "#gallery > li,#trash > ul > li",
    activeClass: "ui-state-highlight",
    drop: function (event, ui) {
        deleteImage(ui.draggable);
    }
});

ドロップ可能な領域ごとに、その兄弟からの要素を受け入れるように定義したことに注意してください

于 2015-05-18T01:58:00.763 に答える