Receive notifications about draggable images in the content div

Question

I have a div that has contenteditable = "true" and contains some html. This html may contain images.

Since contenteditable = "true", the user can move the images by dragging them to a new position. But I need my code to be notified every time the image is moved, so that I get both the moving image element and the target node where the image is deleted. How to do it?

My current solution is adding a Drop listener to the div element that is content, and then I get a drop event every time the user moves the image, but I cannot get a dom node with the image that the user has moved.

Also: Dragging the image seems to copy the DOM node, rather than moving it. It's true? (Tested in firefox).

Answer 1

I would suggest the following pure JavaScript solution

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 moved!"); console.log('Here is data', draggedImg); draggedImg = null; } }, false); 

You will find the node image in the draggedImg variable.

Check out a working example here: http://jsfiddle.net/o09hLtch/2/

Answer 2

jQueryUI functions draggable and droppable . Draggable has a drag event that gives you a draggable item and droppable has a drop event in which you get the deleted item and also where it was deleted.

Quick example: 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

I think you are looking for this,

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

For JSFiddle Demo Let's See

Luck ['}