Ricevi notifiche sulle immagini trascinate all'interno di un divento contentedabile

Question

Ho un div che ha contenteditable = "true" e che contiene alcuni html. Questo codice HTML può includere immagini.

Poiché contenteditable = "true" l'utente può spostare le immagini trascinandole in una nuova posizione. Ma ho bisogno che il mio codice venga notificato ogni volta che viene spostata un'immagine, in modo tale da ottenere sia l'elemento immagine che viene spostato, sia il nodo di destinazione in cui l'immagine viene rilasciata. Come lo faccio?

La mia soluzione corrente aggiunge un listener Drop al mio elemento div che è contenteditable e quindi ottengo un evento drop ogni volta che l'utente sposta un'immagine, ma non riesco a ottenere il nodo dom con l'immagine che l'utente mosso.

Inoltre: il trascinamento di un'immagine sembra copiare il nodo DOM, anziché spostarlo. È vero? (Testato in firefox).

Answer 1

vorrei suggerire un seguendo la pura soluzione JavaScript

HTML:

<div id="space" contenteditable="true"> 
    Hello <img width="300" class="contentImg" src='http://www.independent.co.uk/incoming/article9859555.ece/alternates/w620/Dr-Talyor.jpg'/> dude! 
</div> 

CSS:

#space { 
    width: 500px; 
    height: 500px; 
    background-color: #000000; 
    color: #ffffff; 
} 

JavaScript:

var draggedImg; 
document.addEventListener("dragstart", function(event) { 
    // IE uses srcElement, others use target 
    var targ = event.target ? event.target : event.srcElement; 
    if (targ.className == 'contentImg'){ 
     draggedImg = event.target; 
    } 
}, false); 

document.addEventListener("dragend", function(event) { 
    if(draggedImg){ 
     alert("It's moved!"); 
     console.log('Here is data', draggedImg); 
     draggedImg = null; 
    } 
}, false); 

Troverete un nodo immagine nella variabile draggedImg.

Si prega di rivedere un esempio di lavoro qui: http://jsfiddle.net/o09hLtch/2/

Answer 2

jQueryUI caratteristiche draggable e droppable interazioni. Draggable ha drag event, che ti dà l'elemento trascinato e droppable ha drop event, che ti dà l'elemento rilasciato e dove è stato rilasciato.

esempio rapida: clickety

$('#content .dr').draggable(
{ 
    addClasses: false, 
    drag: function(event, ui) 
    { 
     $('#notify').text('Bird (#' + $(this).attr('id') + ') being dragged: ' + JSON.stringify(ui)); 
    }, 
    stop: function(event, ui) 
    { 
     $('#notify').text(''); 
    } 
}); 

Answer 3

Credo È alla ricerca di questo,

$(function() { 
$(".image").draggable({helper: 'original'}); 
    $(".container").droppable({ 
     drop: function (event, ui) { 
     $(this).append(ui.draggable.css({position: 'static'})); 
     alert('dropped!'); 
    } 
}); 
}); 

Per JSFiddle Demo Let's see

Good Luck [ '}