Otrzymuj powiadomienia o przeciągniętych obrazach w treści div.

Question

Mam div, który ma contenteditable = "true" i który zawiera niektóre html. Ten html może zawierać obrazy.

Od contenteditable = "true" użytkownik może przenosić obrazy, przeciągając je do nowej pozycji. Ale potrzebuję, aby mój kod był powiadamiany za każdym razem, gdy obraz jest przenoszony, w taki sposób, w jaki otrzymuję zarówno element obrazu, który jest przenoszony, jak i docelowy węzeł, w którym obraz jest upuszczany. Jak mogę to zrobić?

Moje obecne rozwiązanie dodaje do elementu div div detektor upuszczania, który jest contenteditable, a następnie dostaję zdarzenie drop za każdym razem, gdy użytkownik przenosi obraz, ale nie mogę uzyskać węzła dom z obrazem, który użytkownik przeniósł.

Również: Przeciąganie obrazu, wydaje się skopiować węzeł DOM, zamiast go przenosić. Czy to prawda? (Testowane w firefox).

Answer 1

Proponuję po czystym rozwiązaniu 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); 

Musisz znaleźć węzeł obrazu w zmiennej draggedImg.

Proszę przejrzeć pracy przykład tutaj: http://jsfiddle.net/o09hLtch/2/

Answer 2

jQueryUI funkcji draggable i droppable interakcji. Przeciąganie ma wartość drag event, która daje element przeciągany, a opcja droppable ma wartość drop event, która zawiera upuszczony element oraz miejsce jego upuszczenia.

Krótki przykład: 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

myślę, że patrząc na to,

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

Dla JSFiddle Demo Let's see

Good Luck [ '}