我正在使用JQuery Draggable將項目移動到網格中。對象捕捉到32x32網格區域。如果對象處於相同位置,我希望能夠取消網格捕捉。JQuery Draggable - 防止網格對象在相同位置
拖動不能取消,只能阻止它進入廣場。在阻止並移回到之前的位置後,如果用戶繼續拖入新的未佔用網格位置,則必須與該位置對齊。
我創建了一個服務於上述目的的演示,但圖像在嘗試進入新位置時會出現毛刺,但會被取消回舊位置。
https://jsfiddle.net/dtx7my4e/1/
這裏是在小提琴代碼:
HTML:
的Javascript:
var objects = [
[0, 0],
[1, 1]
];
$(function() {
$(".drag-item").draggable({
grid: [ 32, 32 ],
containment: '.drop-target',
drag: function (event, obj){
let objectId = $(this).attr('object-id');
var objectPositionX = $(this).position().left/32;
var objectPositionY = $(this).position().top/32;
var previousPositionX = Math.floor(objects[objectId][0]);
var previousPositionY = Math.floor(objects[objectId][1]);
if (objectPositionX != previousPositionX || objectPositionY != previousPositionY) {
if(!isObjectInPosition(objects, [objectPositionX, objectPositionY])) {
objects[objectId] = [objectPositionX, objectPositionY];
} else {
obj.position.left = previousPositionX * 32;
obj.position.top = previousPositionY * 32;
}
}
}
});
});
function isObjectInPosition(arrayToSearch, positionToFind)
{
for (let i = 0; i < arrayToSearch.length; i++) {
if (arrayToSearch[i][0] == positionToFind[0]
&& arrayToSearch[i][1] == positionToFind[1]) {
return true;
}
}
return false;
}
CSS:
.drag-item {
background-image: url("http://i.imgur.com/lBIWrWw.png");
background-size: 32px auto;
width: 32px;
height: 32px;
cursor: move;
}
.drop-target {
background: whitesmoke url("http://i.imgur.com/uUvTRLx.png") repeat scroll 0 0/32px 32px;
border: 1px dashed orange;
height: 736px;
left: 0;
position: absolute;
top: 0;
width: 736px;
}
謝謝,任何幫助是極大的讚賞。
Toby。
非常感謝朱利安! –