我正在尝试将 jQuery 可拖动、可放置和可排序结合起来;但是,我仍然遇到问题。有人可以帮助我吗?
基本上,这个想法如下所示:
- A、B、C、D、E block 可以在上部可放置 block 和可排序 block 之间移动。
- 自定义 (*) 磁贴只能在左侧可放置项和可排序项之间移动。
此外,我正在尝试在必要时随时停用和重新激活所有这些功能。
<小时/>这就是我所拥有的,但它有很多错误并且不漂亮:
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
<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
}
});
可以看到主要是
- 设置可排序,以及
- 根据您的规范创建接受或拒绝特定类型图 block 的自定义接收事件
关于jquery - 结合 jQuery 可拖动、可放置和可排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20385177/