Restreindre les éléments déplaçables jQuery de chevauchement / collision avec les éléments frères

- Je besoin pour utiliser jQuery UI pour restreindre la zone de confinement pour objet déplaçable avec quelques restrictions supplémentaires. J'ai besoin d'empêcher l'élément déplaçable de chevauchement avec d'autres éléments dans le même conteneur. J'ai besoin pour permettre le mouvement de "moveInHere" mais pas de "butNotHere". Est-il possible?

<div id="moveInHere">

    <div id="dragMe"> </div>

    <div id="butNotHere"> </div>

</div>


<script type="text/javascript">

    $("#dragMe").draggable({
        containment: "#moveInHere"
    });

</script>

source d'informationauteur the.ufon | 2012-07-12

  1. 18

    Edit: Nouvelle Solution

    J'ai trouvé un plugin pour cela appelé JQuery UI Déplaçable Collision. L'utilisation de ce, de la mise en œuvre de votre choix à la fonctionnalité devient trivial. Voir la suite de jsFiddle exemple: http://jsfiddle.net/q3x8w03y/1/ (Il utilise la version 1.0.2 de JQuery UI Déplaçable Collision, avec JQuery 1.7.2 et JQueryUI 1.1.18.)

    Voici le code:

    $("#dragMe").draggable({
    obstacle: "#butNotHere",
    preventCollision: true,
    containment: "#moveInHere"
});

    Vieille Solution

    La suivante devrait fonctionner. Il a un problème, cependant. Une fois que les divs entrent en collision, vous avez à "regrab" la div que vous faites glisser, ce qui peut être un peu ennuyeux. Peut-être quelqu'un d'autre le fera savoir comment résoudre ce problème. Vous pouvez voir mon jsFiddle exemple ici: http://jsfiddle.net/MrAdE/8/

    var prevOffset, curOffset;
$("#dragMe").draggable({
    drag: function(e,ui) {
        prevOffset= curOffset;
        curOffset= $.extend({},ui.offset);
        return true;
    }
});

$("#butNotHere").droppable({
    greedy: true,
    over: function(e,ui) {
        ui.helper.offset(curOffset= prevOffset).trigger("mouseup");
    },
    tolerance: "touch"
});​
  2. 6

    Ce qui m'a pris un peu de violon. Fondamentalement, j'ai créé un droppable sur l'élément que vous voulez éviter, puis définissez une valeur de type boolean lorsque le déplacement est terminé. J'utilise ensuite que les sans papiers rétablir la fonction ignorer pour annuler la baisse. Il ne fonctionne que si #dragMe est entièrement plus #butNotHere:

    $(document).ready(function(){
    var shouldCancel = false;
    $('#dragMe').draggable({
        containment: '#moveInHere',
        revert: function(){
            if (shouldCancel) {
                shouldCancel = false;
                return true;
            } else {
                return false;
            }
        }
    });
    $('#butNotHere').droppable({
        over: function(){
            shouldCancel = true;
        },
        out: function(){
            shouldCancel = false;
        }
    });
});

    Découvrez le travail de démonstration et n'hésitez pas à jouer avec elle: http://jsfiddle.net/H59Nb/31/