Take the 2-minute tour ×

I'm needing to let users drag an element inside a contenteditable div to another point in the text. The item that needs to be movable is set to ContentEditable=false.

Is this possible? I can't seem to find any real solutions. Here's what I want to do: http://jsfiddle.net/s82Ex/

share|improve this question
Are you using a webkit browser? Those are the buggiest ones with regards to several contentEditable features like this one –  AlfonsoML Mar 28 '12 at 7:02
I am, and Webkit, followed by Mozilla would be my target audience. I'll probably completely drop support for IE. –  Adam Mar 28 '12 at 20:15
I this a duplicate to stackoverflow.com/q/3006623/1048572? –  Bergi Mar 30 '12 at 7:37
add comment

2 Answers

demo: http://so.devilmaycode.it/drag-block-element-from-one-point-to-another-inside-contenteditable-div

keep in mind this is just a proof of concept take as is and modify it to suit your needs;

        $(function() {    
            $('#draggable').live('mousemove', function(e) {
                $this = $(this);
                    containment: 'parent',
                    cursor : "move",
                    stop : function(e, ui) {
                        var piece = document.elementFromPoint(ui.offset.left, ui.offset.top);
                        $('<div id="draggable" contenteditable="false">Drag Me?</div>').insertAfter('#' + piece.id);
            $("#contenteditable").blur(function() {
            function buildPieces() {
                var data = $("#contenteditable").text().split(' ');
                var html = [];
                    if ( $.trim(data[i]) != '' )
                    html.push('<div class="piece" id="piece-' + i + '">' + data[i] + '</div>');
                $("#contenteditable").html(html.join(' '));
share|improve this answer
This will be a GREAT piece of code to build from. Thanks a lot! –  Adam Apr 5 '12 at 5:53
add comment

Here's your answers from credible and official sources: https://bugs.webkit.org/show_bug.cgi?id=12250

share|improve this answer
Hmm ok. The solution I ended up using was jQuery UI Sortable. May not work for everyone, but in my case it worked perfectly. –  Adam Mar 30 '12 at 16:27
add comment

Your Answer


