组合jQuery可拖动、可拖放和可排序
我尝试将jQuery可拖动、可拖放和可排序结合起来;然而,我一直有问题。有人能帮我吗 基本上,这一想法如下所示:组合jQuery可拖动、可拖放和可排序,jquery,jquery-ui,jquery-ui-sortable,jquery-ui-draggable,jquery-ui-droppable,Jquery,Jquery Ui,Jquery Ui Sortable,Jquery Ui Draggable,Jquery Ui Droppable,我尝试将jQuery可拖动、可拖放和可排序结合起来;然而,我一直有问题。有人能帮我吗 基本上,这一想法如下所示: A、 B、C、D、E瓷砖可在上部可放下和可分拣之间移动 自定义(*)磁贴只能在左侧可拖放和可排序之间移动 此外,我正试图能够停用和重新激活所有这些站在任何必要的时候 这就是我所拥有的,但它非常有童车而且不漂亮: JS var gameContainer = $(".game"); var myTray = $(".tray").sortable({ containm
- A、 B、C、D、E瓷砖可在上部可放下和可分拣之间移动
- 自定义(*)磁贴只能在左侧可拖放和可排序之间移动
这就是我所拥有的,但它非常有童车而且不漂亮: JS
var gameContainer = $(".game");
var myTray = $(".tray").sortable({
containment: gameContainer,
helper: "clone",
revert: 100,
tolerance: "pointer",
update: function(ev, ui) {
ui.item.addClass("ontray").css({
"left": "0px",
"position": "static",
"top": "0px"
});
}
}).disableSelection();
var setTileDraggable = function(tileSelector) {
tileSelector.draggable({
connectToSortable: myTray,
containment: gameContainer,
helper: "original",
revert: "invalid"
}).disableSelection();
};
var myBoard = $(".board").droppable({
accept: ".tile:not(.red)",
drop: function(ev, ui) {
if (ui.draggable.hasClass("ontray")) {
// tile (not red) coming from tray, place it into .tiles child div
var cloneTile = ui.draggable.clone().removeClass("ontray").show();
myBoard.children(".tiles").append(cloneTile);
var dropx = ui.offset.left - myBoard.offset().left;
var dropy = ui.offset.top - myBoard.offset().top;
cloneTile.css({
"left": dropx + "px",
"position": "absolute",
"top": dropy + "px"
});
setTileDraggable(cloneTile);
ui.helper.remove();
ui.draggable.remove();
}
}
}).disableSelection();
var myCustomTile = $(".custom").droppable({
accept: ".tile.red",
drop: function(ev, ui) {
if (ui.draggable.hasClass("ontray")) {
// red tile coming from tray
var cloneTile = ui.draggable.clone().removeClass("ontray").show();
myCustomTile.append(cloneTile);
setTileDraggable(cloneTile);
setTileClick(cloneTile);
ui.helper.remove();
ui.draggable.remove();
} else {
// red tile staying, move back to original position
ui.draggable.stop(true, false).animate({
"left": "0px",
"top": "0px"
});
}
}
}).disableSelection();
// set up draggables
setTileDraggable(myBoard.children(".tiles").find(".tile"));
setTileDraggable(myCustomTile.find(".tile"));
HTML
D
B
E
X
C
A.
如果您将所有的框都分类,这将是一个容易得多的项目,因为它们有现成的方法可以轻松地相互连接。下面是您的示例的快速实现:
你可以看到它主要是
- 设置排序表,以及
- 根据您的规范创建接受或拒绝特定类型磁贴的自定义接收事件
这实际上效果很好。谢谢,但我需要将瓷砖绝对放在“.alpha”中,因为它们应该放在你放下它们的任何地方。我可以这样做吗?这确实帮助了我,但是有一个bug使得托盘中的瓷砖被复制,很可能是因为助手。(我知道这很旧,但这可能对像我这样的人有用)
<div class="game">
<div class="board">
<div class="tiles">
<div class="tile">D</div>
<div class="tile">B</div>
<div class="tile">E</div>
</div>
</div>
<div class="custom">
<div class="tile red">X</div>
</div>
<div class="tray">
<div class="tile">C</div>
<div class="tile">A</div>
</div>
</div>
$('.alpha').sortable({
connectWith: '.gamma',
receive: function (event, ui) {
if ($(ui.item).hasClass('special')) {
ui.sender.sortable('cancel');
}
}
});
$('.beta').sortable({
connectWith: '.gamma',
receive: function (event, ui) {
if (!$(ui.item).hasClass('special')) {
ui.sender.sortable('cancel');
}
}
});
$('.gamma').sortable({
appendTo: document.body,
items: '.tile',
connectWith: '.alpha, .beta',
receive: function (event, ui) {
//console.log(event, ui.item);
//ui.item.remove(); // remove original item
}
});