0
faire glisser les éléments dans le conteneur ne devrait pas se chevaucher comment pouvons-nous restreindre. s'il vous plaît aidercomment limiter les éléments de glissement à chevaucher dans interact.js
faire glisser les éléments dans le conteneur ne devrait pas se chevaucher comment pouvons-nous restreindre. s'il vous plaît aidercomment limiter les éléments de glissement à chevaucher dans interact.js
Désolé que cela n'a pas répondu plus tôt. Je crois que vous devez vérifier manuellement la position du haut, en bas, à gauche, et les bords droits des éléments, alors voici ce que je l'ai fait:
//Call this function from within your .on('dragmove') method.
//It should replace your translations.
function noOverlap(event, overlapElements){
//just for flagging when the target would overlap another element
var overlap = false;
var targetDims = event.target.getBoundingClientRect();
for(i = 0; i < overlapElements.length; i++){
var overlapElementDims =
overlapElements[i].getBoundingClientRect();
//make sure the element doesn't look at itself..
if(overlapElements[i] != event.target){
//checks if the target "doesn't" overlap
if(((targetDims.right + dx) < (overlapElementDims.left + 1))
||((targetDims.left + 1 + dx) > (overlapElementDims.right))
||((targetDims.top + 1 + dy) > (overlapElementDims.bottom))
||((targetDims.bottom + dy) < (overlapElementDims.top + 1))}{
//Basically, the target element doesn't overlap the current
//element in the HTMLCollection, do nothing and go to the
//next iterate
}
else{
//This is if the target element would overlap the current element
//set overlap to true and break out of the for loop to conserve time.
overlap = true;
break;
}
}
};
if(overlap === false){
//if there's no overlap, do your normal stuff, like:
event.target.x += dx;
event.target.y += dy;
event.target.style.webkitTransform =
event.target.style.transform =
'translate(' + event.target.x + 'px, ' + event.target.y + 'px)';
//then reset dx and dy
dy = 0;
dx = 0;
}
else{
if(event.interaction.pointers[event.interaction.pointers.length - 1].type
=== "pointerup"){
//check if the target "is" in the restriction zone
var restriction =
interact(event.target).options.drag.restrict.restriction;
var restrictionDims = restriction.getBoundingClientRect();
if((targetDims.right > restrictionDims.right) ||
(targetDims.left < restrictionDims.left) ||
(targetDims.bottom > restrictionDims.bottom) ||
(targetDims.top < restrictionDims.top)){
event.target.style.webkitTransform =
event.target.style.transform =
'translate(0px, 0px)';
//then reset dx and dy
dy = 0;
dx = 0;
//then reset x and y
event.target.x = 0;
event.target.y = 0;
}
}
}
}
Aussi, si quelqu'un finit par lire ceci, s'il vous plaît laissez-moi savoir ce que tout ce que je pourrais faire pour améliorer l'efficacité. – KirklandBrown373
J'ai arrêté de glisser en mettant à jour les positions de l'élément déplacé, mais aucune idée de comment je peux arrêter le déplacement du pointeur de la souris dans ce cas? – not2savvy
arrêter le déplacement du pointeur de la souris est un sujet complètement différent de l'interaction js. Je voudrais regarder quelque chose comme ça: http://www.smartjava.org/content/html5-use-pointer-lock-api-restrict-mouse-movement-element – KirklandBrown373