CODEWITHSUNDEEP
jqueryjquery-uiiframedraggablejquery-ui-sortable
Giberno
Giberno

Reputation: 1323

jquery ui draggable sortable elements into an iframe

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.

Upvotes: 4

Views: 2280

Answers (2)

Trevor
Trevor

Reputation: 16116

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

Upvotes: 3

chinnu
chinnu

Reputation: 66

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
    }
});

Upvotes: 0

Related Questions