4

I have some trouble in jquery ui draggable sortable elements into an iframe.

Some code works here

But my situation is a little different. In fact i want to drag some words into a WYSIWYG editor which is create an iframe by javascript. Code here:

<script type='text/javascript'>
$(document).ready(function(){
    $("#input").cleditor();
    setInterval(function(){
    $('.draggable').draggable({
        appendTo:'body',
        helper:'clone',
        iframeFix: true,
        revert:'invalid',
        connectToSortable:$('#w-edit').contents().find('#sortable').sortable({
            iframeFix: true,
            cursorAt:{top:0,left:0} 
        }),
        cursorAt:{top:0,left:0} 
    });
    },1000);
}); 
</script>
<body id="my-body">
<ul>
  <li class="draggable">Drag me</li>
  <li class="draggable">Drag me 2</li>
  <li class="draggable">Drag me 3</li>
</ul>
<textarea id="input" name="input"></textarea>
</body>

Online test code here

But I draggable sortable elements into the created iframe. How to make a right way? Thanks.

Improve this question
0

2 Answers 2

Reset to default
3
+200

Update 3

The following solution is pretty stable in Chrome Firefox and Safari:

var $editor = $("#input").cleditor()[0];
var focused = false;
var isFirefox = typeof InstallTrigger !== 'undefined';
var text = '';
$('.draggable').draggable({
        appendTo:'body',
        helper:'clone',
        iframeFix: true,
        revert:'invalid',
        cursorAt:{top:0,left:0} 
});

$("#w-edit").droppable({
    drop: function (event, ui) {
        text = ui.draggable.text();
        if(!focused && !isFirefox)
            $editor.focus();
        else
            $editor.focused(); 
    }
});

$editor.focused(function(){
    if(text != ''){
        $editor.execCommand('inserthtml',text, false);
        text = '';
    }
    focused = true;
});

$editor.blurred(function(){
    focused = false;    
});

$editor.change(function(){
    if(!$('#w-edit').hasClass('ui-droppable')){
        focused = false;
        $("#w-edit").droppable({
            drop: function (event, ui) {
                text = ui.draggable.text();
                if(!focused && !isFirefox)
                    $editor.focus();
                else
                    $editor.focused();
           }
        });    
    }
});

http://jsfiddle.net/C3cFk/

The only issues I can find are if you happen to re-size the window and then drag an item over it can be a little unpredictable where the newly dragged item shows up in the text area. Frankly I don't know how to remedy this and I am a little burned out trying to get this to work. (Mainly because of IE)

IE Issues

This does not work very well in IE (tested on IE 10), unless you click into the editor each time then half the time the words overwrite each other. execCommand('inserthtml' does not work very well in IE if at all. I modified the code to use pasteHTMl which IE supports and still had issues like if you click off the editor and then drag items sometimes it replaces all the text. Or if you re-size the page and then you drag more items over it will append the items to the top of the page instead of the editor unless you click in the editor first. I don't believe this solution works for IE8 there are even more limitations to deal with and there is no easy way for me to test or develop on IE8 so I'm going to leave that alone.

Here is the best I could come up with for IE10:

$(document).ready(function(){
        var $editor = $("#input").cleditor()[0];
        var focused = false;
        var text ='';
        var temp;
        $('.draggable').draggable({
                appendTo:'body',
                helper:'clone',
                iframeFix: true,
                revert:'invalid',
                cursorAt:{top:0,left:0} 
        });

        $("#w-edit").droppable({
            drop: function (event, ui) {
                temp = $(this).contents().find("html body")[0];
                text = ui.draggable.text();
                if(!focused)
                    $editor.focus();
                else
                    $editor.focused(); 
            }
        });

        $editor.focused(function(){
            if(text != ''){
                var doc = document.getElementById("w-edit").contentWindow.document;
                if (doc.selection && doc.selection.createRange) {
                    var range = doc.selection.createRange();
                    if (range.pasteHTML) {
                        range.pasteHTML(text);
                    }
                }
                $editor.updateTextArea();
                text = '';
            }
            focused = true;
        });

        $editor.blurred(function(){
            focused = false;    
        });

        $editor.change(function(){
            if(!$('#w-edit').hasClass('ui-droppable')){
                $("#w-edit").droppable({
                    drop: function (event, ui) {
                        temp = $(this).contents().find("html body")[0];
                        text = ui.draggable.text();
                        if(!focused)
                            $editor.focus();
                        else
                            $editor.focused();
                   }
                });  
            }
        }); 
    });

All in all this type of things appears to be really hard to get right in all browsers. For each browser I had to handle something differently in order to get it to work.

Note:

I tested the code from my previous answer (the code that you said did not work in IE8 and the text doesn't go where your cursor is) on IE8 and It worked for me (Make sure your browser mode and doc mode are IE8):

$(document).ready(function(){
        var $editor = $("#input").cleditor()[0];
        $('.draggable').draggable({
                appendTo:'body',
                helper:'clone',
                iframeFix: true,
                revert:'invalid',
                cursorAt:{top:0,left:0} 
        });

        $("#w-edit").droppable({
            drop: function (event, ui) {
                console.log('drop');
                $(this).contents().find("html body").append(ui.draggable.text()+' '); 
                $editor.updateTextArea();
            }
        });

        $editor.change(function(){
            if(!$('#w-edit').hasClass('ui-droppable')){
                $("#w-edit").droppable({
                    drop: function (event, ui) {
                        $(this).contents().find("html body").append(ui.draggable.text()+' '); 
                        $editor.updateTextArea();
                   }
                });    
            }
        });
    });
Improve this answer
6
  • @Giberno please give me feedback if this does not answer your question so that I may work on a solution acceptable to you.
    – Trevor
    Commented Jan 30, 2014 at 0:37
  • thanks for an update. now chrome is worked. but still has 2 problems, 1. can i drag words after any mouse cursor, not always the end of WYSIWYG editor? 2. not worked well in IE position. Thanks and regards.
    – Giberno
    Commented Jan 31, 2014 at 8:16
  • @Giberno I have a question on #2 not worked well in IE position. are you talking about it not working in IE? What version of IE are you using? The cleditor even load for me in IE10 I can look into that but seems like's its an issue with the plugin itself.
    – Trevor
    Commented Jan 31, 2014 at 13:25
  • @Giberno You can check my latest update, that is about the best I can do, the Drag and drop functionality you want with the WYSIWYG editor is very hard to work with when going for browser compatibility.
    – Trevor
    Commented Jan 31, 2014 at 20:29
  • @revor, it works now, btw, what is mean var $editor = $("#input").cleditor()[0];?
    – Giberno
    Commented Feb 2, 2014 at 12:41
0

Solution to this probelm:

$("#input").cleditor();
setInterval(function(){
$('.draggable').draggable({
    appendTo:'body',
    helper:'clone',
    iframeFix: true,
    revert:'invalid',
    connectToSortable:$('#w-edit').contents().find('#sortable').sortable({
        iframeFix: true,
        cursorAt:{top:0,left:0} 
    }),
    cursorAt:{top:0,left:0} 
});
},1000);
$( "#w-edit" ).droppable({
   drop: function( event, ui ) {
       $('#w-edit').val(defaultText);//defaultText is dummy parameter,here we can use anyname
    }
});
Improve this answer
3
  • once you drag one item, you cannot drag it again jsfiddle.net/aamir/3PAv9/8
    – Aamir Afridi
    Commented Jan 29, 2014 at 11:36
  • 1
    jsfiddle.net/8Jwxv/42/-- just check this link.Dragging is possible any number of times.It is not restricted
    – chinnu
    Commented Jan 29, 2014 at 11:38
  • @chinnu, your code could drag item into iframe, but the position is confusione, the item should be inserted into the WYSIWYG editor write sentence, not anywhere. And if i drag it again(in the iframe part), it will copy more, not moving.
    – Giberno
    Commented Jan 30, 2014 at 10:41

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