Les éléments enfants sont permettant ainsi de glisser/déposer

J'ai un étrange problème avec le glisser-déposer dans html5.

Panneau Un a une liste des types d'éléments que vous pouvez faire glisser. Panneau B est l'endroit où les éléments sont déplacés. Panneau C et D sont les autres endroits où vous pouvez faire glisser des éléments, et vous pouvez faire glisser et de réorganiser les éléments entre les Panneaux B, C et D.

Mon problème est que je suis en mesure de faire glisser un élément et de le déposer à l'INTÉRIEUR d'un autre élément qui est à l'intérieur de l'un des panneaux, que je ne veux pas que l'utilisateur soit en mesure de le faire. L'enfant des éléments de ces panneaux n'ont pas de genre de javascript ou de le glisser propriétés liées attaché à eux, et pourtant ils sont actuellement en permettant que des éléments à glisser à l'intérieur d'eux.

J'ai essayé de fixer le ondrop= " return false;" et "ondragover='return false;'", mais aucune n'a fonctionné.

Il y a sûrement un moyen de désactiver la " autoriser les glisser dans la propriété sur un élément?

Voici mon code:

<div id="elem-002" draggable="true" ondragstart="drag(event)">content</div>

Le panneau principal:

<div id="panel-b" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div id="elem-001" draggable="true" ondragstart="drag(event)">content</div>
</div>

Le JS:

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

Dit d'une autre manière: je suis en mesure de faire glisser mon "elem-002" directement dans "elem-001", un élément qui a déjà été emportée. Cela provoque l'imbrication des éléments que je ne veux pas de se produire. Comment puis-je éviter cela?

InformationsquelleAutor Zerkeras | 2014-06-10

Fondamentalement, vous devez régler correctement l' ev.dataTransfer.dropEffect dans allowDrop. Pour votre draggable éléments qu'il devrait être "none" (chute n'est pas autorisé), et pour tout le reste (ou de tout autre élément où le déposant est autorisé) à "all"

Lecture de dropEffect

Live exemple:

JS:

window.allowDrop = function(ev) {
    ev.preventDefault();
    if (ev.target.getAttribute("draggable") == "true")
        ev.dataTransfer.dropEffect = "none"; //dropping is not allowed
    else
        ev.dataTransfer.dropEffect = "all"; //drop it like it's hot
};

window.drag = function(ev) {
    ev.dataTransfer.setData("id", ev.target.id);
};

window.drop = function(ev) {
    ev.preventDefault();
    var id = ev.dataTransfer.getData("id");

    var dragged = document.getElementById(id);
    ev.target.appendChild(dragged);
    dragged.className += " dropped";
};

CSS:

.drag {
    display: inline-block;
    padding: 5px;
    background: rgba(0, 0, 0, 0.2);
    margin: 2px;
}

.dropzone {
    background: #ccc;
    padding: 5px;
    margin-top: 10px;
}

HTML:

<div id="first" class="drag" draggable="true" ondragstart="drag(event)">1</div>
<div id="second" class="drag" draggable="true" ondragstart="drag(event)">2</div>

<div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"><div id="third" class="drag dropped" draggable="true" ondragstart="drag(event)">3</div></div>

Cette solution n'empêche pas déplaçable éléments de recevoir des gouttes. Voir stackoverflow.com/a/28203782/670433 pour une solution qui a fonctionné pour moi.

InformationsquelleAutor lloiser

4

Je ne suis pas sûr que ce soit la MEILLEURE solution, cependant je l'ai fait venir avec quelque chose.

J'ai changé de chute(ev) à ceci:
```
function drop(ev) {
    ev.preventDefault();

    if (!ev.target.getAttribute("ondrop"))
        return false;

    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
```
Ce ou d'une variante de cela évite de tout, d'être tombé dans un élément qui n'a pas eu de "ondrop" explicitement défini.
- J'ai aimé ce dû à un manque de complexité, mais ne peut pas confirmer si c'est du solide. De travail pour moi pour l'instant.
- Cela fonctionne, mais le navigateur n'affiche pas le "ne pas faire tomber l'icône que vous attendez pour les non droppable éléments.
- Est-il un moyen d'obtenir de l'ev.la cible de l'élément parent, de sorte que cela pourrait entraîner toujours tomber sur l'élément qui a "ondrop" spécifiquement ajouté à cela?
- la raison pour laquelle il ne l'est pas "ne pas tomber", l'icône est parce que vous êtes toujours à l'intérieur de l'élément qui est une cible de dépôt. Ce code juste annule une chute si elle est tombée à l'intérieur d'un élément enfant d'une baisse de la cible, lorsque cet enfant de l'élément n'est pas spécifiquement fait une cible de dépôt ainsi.
InformationsquelleAutor Zerkeras
0

Je suis en utilisant une mesure de glisser-déposer, le mélange de la souris[bas|déplacer vers le haut|] d'un élément à être déplacés avec la résistance[enter|plus de|quitter] & drop sur un autre élément. Et je suis en utilisant des Événements pour déclencher/feu/de la répartition de la baisse de l'événement. Qui n'a pas vraiment faire une différence à la question à portée de main, je voulais juste donner le contexte.

Anyhoo, j'ai été confrontés à ce même type de problème, et après avoir cherché pendant un certain temps, et faire un peu de débogage, j'ai réalisé que l'événement.[target|srcElement] est en fait l'élément qui "envoyé" de l'événement. Donc, ce que j'ai fait était d';
rejeter toute chute où la [cible|srcElement] est le pas le " il "élément de l'événement et où" il " ne contiennent pas la [cible|srcElement] (c'est à dire pas un de ses enfants), alors seulement je permettre un traitement ultérieur;
```
//Drop Event Handler
function dropEventHandler(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;

    if (this !== target && this.contains(target)) {
        //Use if not a proper/normal event, this should stop any further 
        //  processing of the event 
        //if (event.stopPropagation) event.stopPropagation();  //Standard model
        //else event.cancelBubble = true;                       //IE

        //Stops the default action of an element from happening
        //Use the event.isDefaultPrevented() method to check whether 
        //  the preventDefault() method was called for the event
        if (event.preventDefault) event.preventDefault();   //Standard model
        else event.returnValue = false;                      //IE

        return false;
    }
    //Process drop event
}
```
Testé dans Chrome, FF, Opera, IE Bord && IE 11 [émulation de 7-11] sur Windows 10,
aussi IE v8.0.7601.17514 sur Windows 7 [IE7 et IE8 Compatibilité] les modes testés.

InformationsquelleAutor Dev Ops
0

J'ai amélioré un peu sur @Zerkeras réponse en permettant à l'utilisateur de déposer n'importe où à l'intérieur de la cible, mais, plutôt que de ne pas, si l'utilisateur arrive à tomber à l'intérieur d'un élément à l'intérieur de la cible, il vient de s'ajuste où l'élément est perdu.
```
function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        var i = 0;
        var element = ev.target
        while (!element.getAttribute("ondrop") && i < 3) {
            console.log("recalibrating");
            element = element.parentElement;
            i++;
        }
        element.appendChild(document.getElementById(data));
    }
```
Remarque, j'ai ajouté un arbitraire de 3 à s'échapper de la boucle while car je me méfie de tout, des boucles qui ne sont pas garantis à s'échapper. C'est de la pure paranoïa de ma part dans ce cas particulier, mais il a été très utile lorsque j'ai été le tester.

La raison, j'ai utilisé la nouvelle variable element était parce que la modification directe de la ev.target semblait impossible (je ne pense pas que l'immutabilité travaillé en JavaScript? si quelqu'un sait pourquoi cela était, je suis curieux). Donc ma boucle while n'a jamais été sortie c'est pourquoi vous voyez mon paranoïaque escape clause de là.

InformationsquelleAutor Glen Pierce

Vous devez vous connecter pour publier un commentaire.