All geek questions in one place

Jquery ui draggable sortable elements in iframe

I have some problems with jquery ui draggable sortable elements in an iframe.

Some code works here

But my situation is a little different. Actually I want to drag some words into the WYSIWYG editor , which creates an iframe using javascript. The code is 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 am dragging the sorted elements into the created iframe. How to make the right way? Thanks.

+4
source share
2 answers

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/

, , - , , , . , , , , . ( - IE)

IE

IE ( IE 10), , , . execCommand('inserthtml' IE, . , pasteHTMl, IE , , , , . , , , , . , IE8, , IE8, .

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

, . - -, .

:

(, , , IE8, , ) IE8, (, doc - 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();
                   }
                });    
            }
        });
    });
+3

:

$("#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
    }
});
0

Source: https://habr.com/ru/post/1523764/

More articles:


All Articles