6

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

Since contenteditable="true" the user can move images by dragging them to a new position. But I need my code to be notified each time a image is moved, in a way where I get both the image element which is being moved, and the target node where the image is dropped. How do I do that?

My current solution adds a Drop listener to my div element which is contenteditable, and then I do get a drop event each time the user moves an image, but I can't get the dom node with the image which the user moved.

Also: Dragging an image, seems to copy the DOM node, instead of moving it. Is this true? (Tested in firefox).

2
  • you show us your code and if you really want to make us happy you even create a jsfiddle.net
    – caramba
    Aug 10, 2015 at 15:24
  • a jsfiddle Is a bit complicated, because I am using gwt(Googles java to javascript compiler). So my current almost working solution is written in Java.
    – MTilsted
    Aug 10, 2015 at 16:21

3 Answers 3

4
+200

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

You'll find an image node in draggedImg variable.

Please review a working example here: http://jsfiddle.net/o09hLtch/2/

3
  • I like the concept, but if I try the example in the jsfiddle and move the picture 20 pixel to the left i get this is my console:
    – MTilsted
    Aug 14, 2015 at 13:31
  • I like the concept, and it seems to work. Just a quick note: you should move the alert down below draggedImg = null, otherwise you get infinite recursion in firefox.
    – MTilsted
    Aug 14, 2015 at 13:38
  • Thanks for the note. This alert is just a way to show a message about the event. Can be easily removed or replaced by console.log, or by any other logic to handle this event. Aug 14, 2015 at 13:44
0

jQueryUI features draggable and droppable interactions. Draggable has drag event, which gives you the dragged element and droppable has drop event, which gives you the dropped element as well as where it was dropped.

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('');
    }
});
0

I think You 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

Good Luck ['}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.