über gezogene Bilder in einem contenteditable div benachrichtigt werden

Question

Ich habe ein div, das contenteditable = "true" und enthält einige HTML. Dieser HTML-Code kann Bilder enthalten.

Da contenteditable = "true" kann der Benutzer Bilder verschieben, indem er sie an eine neue Position zieht. Aber ich brauche meinen Code, um jedes Mal, wenn ein Bild verschoben wird, benachrichtigt zu werden, und zwar auf eine Weise, bei der ich sowohl das Bildelement, das bewegt wird, als auch den Zielknoten, an dem das Bild abgelegt wird, erhalte. Wie mache ich das?

Meine aktuelle Lösung fügt meinem Div-Element einen Drop-Listener hinzu, der contenteditable ist, und dann bekomme ich jedes Mal ein Drop-Ereignis, wenn der Benutzer ein Bild verschiebt, aber ich kann den Dom-Knoten nicht mit dem Image des Benutzers abrufen gerührt.

Auch: Ziehen eines Bildes, scheint den DOM-Knoten zu kopieren, anstatt ihn zu verschieben. Ist das wahr? (Getestet in Firefox).

Answer 1

Ich würde ein vorschlagen folgende reine JavaScript-Lösung

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); 

Sie sehen nun ein Bild Knoten in draggedImg Variable finden.

Bitte lesen Sie ein funktionierendes Beispiel hier: http://jsfiddle.net/o09hLtch/2/

Answer 2

jQueryUI Merkmale draggable und droppable Wechselwirkungen. Draggable hat drag event, was Ihnen das gezogene Element und droppable gibt drop event, die Ihnen das gelöschte Element gibt sowie wo es gelöscht wurde.

Schnell Beispiel: 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

Ich denke, Sie für diese suchen,

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

Für JSFiddle Demo Let's see

Good Luck [ '}