Lâche éléments de l'id au lieu de déposer l'id de la cible

Je suis assez nouveau à jQuery et je suis coincé à essayer d'obtenir que vous faites glisser des éléments de l'image id pour ajouter à la cible de dépôt au lieu de l'image de l'élément lui-même ou les cibles de dépôt id. Je suis en utilisant le html5 natif du Mdn. Et jusqu'à présent je peux obtenir de l'élément lui-même à ajouter par l'envoi par le biais de son identité avec le datatransfer méthode de la fonction de glissement et de la fonction getdata dans la liste. Chaque fois que j'essaie d'appeler l'identifiant de la baisse toutefois il obtient la chute de l'id de la cible au lieu de la traîné éléments.

Toute aide serait grandement apprécié que j'ai cherché à fond en ligne et n'a rien trouvé, mais plus de méthodes pour obtenir l'id de la cible de la zone de largage. Voici un extrait de mon code en cours de violon:

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

function dragStart(ev) {

ev.dataTransfer.setData('Text/html', ev.target.id); //sends the dragged images data.

//alert(ev.target.id); //alerts the correct id of the dragged image.

}


function drop(ev) {

ev.preventDefault();
var data = ev.dataTransfer.getData("text/html");//retrieves dropped images data.
ev.target.appendChild(document.getElementById(data));//this displays the dropped image.

//alert(ev.target.id); //alerts the id of the drop target(Want to get the dropped images id.)

//$("#mybillets").append("<span>"+ev.target.id+" </span>"); //appends the drop targets id(Want to append the dropped images id.)
}
Si vous avez l'élément DOM dans une variable nommée elem, puis l'id est simplement elem.id.
dans ce cas data devrait vous donner
Tous les conseils sur comment je pourrais mettre en œuvre? Essayé beaucoup de choses différentes que ma tête est frit.
var data devrait avoir ce dont vous avez besoin.Puisque vous êtes nouveau à jQuery essayer de jQuery UI.Il l'a bien intégré dans les options de glisser-déposer. Ensuite, vous avez juste besoin de faire appel $(ui.draggable).closest("img").attr("id"); pour obtenir l'ID de l'image check this out jqueryui.com/draggable
Je me sens tellement stupide, a obtenu tri. Merci pour l'aide les gars, n'auraient pas cliqué avec moi sinon. J'ai juste utilisé les "données de" variable d'appeler le numéro d'identification. Arun P, vous êtes commentaire m'a fait réaliser combien il est facile et que je suis bête. J'ai eu un coup d'oeil à l'INTERFACE utilisateur, mais voulait de l'avoir avec le natif de Glisser-Déposer, comme c'est partie d'un grand projet et je voulais apprendre quelques nouveaux trucs. Merci pour toute l'aide! $("#mybillets").append("<span>"+data+" </span>");

OriginalL'auteur Jason | 2014-10-22

  1. 0

    Grâce à @Arun P Johny. Excellent travail sur cet exemple simple.

    Cependant, je voulais juste ajouter que si vous essayez et faites-le glisser à partir d'une "Une" balise, vous n'aurez pas beaucoup de chance.

    Ce sera pas travail (dans tous les navigateurs):

    <a draggable="true" ondragstart="drag(event)" id="drag1" href="#">
 <img src="//placehold.it/336X69/ff0000" width="336" height="69" />
</a>

    Cependant, cette volonté de travail (en plus de navigateurs):

    <img draggable="true" ondragstart="drag(event)" id="drag1" src="//placehold.it/336X69/ff0000" width="336" height="69" />

    Ce qui m'a pris un long temps de découvrir cela, parce que beaucoup de navigateurs n'utilisent pas de retour ou de vous permettre d'obtenir l'id de la source de ce que vous faites glisser.
    Cet exemple devrait révéler l'id de la source pour vous dans une alerte et aussi la console:

    <script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData('text', ev.target.id);
    }

    function drop(ev, target) {
        ev.preventDefault();
        console.log(target.id + " : " + ev.target.id) 
        console.log(ev.dataTransfer.getData("text/html")); 
        console.log(ev.dataTransfer.getData("text")); 
        var data = ev.dataTransfer.getData("text");
        alert(data)
    }
</script>
<style "type="text/css">
       #div1 
       { 
          width: 350px; 
          height: 70px; 
          padding: 10px; 
          border: 1px solid #aaaaaa; 
       }
</style>

<div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)"></div>
<br/>
<img id="drag1" src="http://placehold.it/336X69/ff0000" draggable="true" ondragstart="drag(event)" width="336" height="69" />
    Maintenant, il est mis en place dans ce jsfiddle: jsfiddle.net/tqk3b745

    OriginalL'auteur vr_driver