个人中心
gpt4 book ai didi

jquery ui可拖动可排序元素到iframe中

转载 作者：行者123 更新时间：2023-12-01 00:18:26 24 4
gpt4 key购买 nike

我在将 jquery ui 可拖动可排序元素放入 iframe 中时遇到一些问题。

一些代码有效 here

但我的情况有点不同。事实上，我想将一些单词拖入 WYSIWYG编辑器，通过 javascript 创建 iframe。代码在这里:

<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>

在线测试代码here

但是我可以将可排序元素拖动到创建的 iframe 中。如何走正确的路？谢谢。

最佳答案

更新3

以下解决方案在 Chrome Firefox 和 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 中工作得不太好(如果有的话)。我修改了代码以使用 IE 支持的 pasteHTMl ，但仍然存在问题，例如如果您单击编辑器然后拖动项目，有时它会替换所有文本。或者，如果您重新调整页面大小，然后在其上拖动更多项目，则会将项目附加到页面顶部而不是编辑器顶部，除非您先单击编辑器。我不相信这个解决方案适用于 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 中不起作用，并且文本不会转到光标所在的位置)，它对我有用(Make确保您的浏览器模式和文档模式是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();
                   }
                });    
            }
        });
    });

关于jquery ui可拖动可排序元素到iframe中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21361263/

24 4 0
文章推荐： jquery - <textarea> 的值更改后运行 keydown 事件处理程序
文章推荐： jquery - jquery 中的下拉子菜单出现问题
文章推荐： jquery - 使用 jQuery ajax 和查询字符串中的参数进行 HTTP 删除
文章推荐： jquery - 从 String 加载 jQuery 插件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com