jquery ui可拖动可排序元素到iframe中
Posted
技术标签:
【中文标题】jquery ui可拖动可排序元素到iframe中【英文标题】：jquery ui draggable sortable elements into an iframe 【发布时间】：2014-02-17 03:14:09 【问题描述】：我在将 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 中。如何走对路？谢谢。
【问题讨论】：
【参考方案1】：更新 3
以下解决方案在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 中不能很好地工作。我修改了代码以使用 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 中不起作用，并且文本不在光标所在的位置），它对我有用（确保您的浏览器模式和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();
);
);
);
【讨论】：
@Giberno 如果这不能回答您的问题，请给我反馈，以便我可以制定您可以接受的解决方案。 感谢您的更新。现在铬工作。但仍然有 2 个问题，1. 我可以在任何鼠标光标之后拖动单词，而不总是在 WYSIWYG 编辑器的末尾吗？ 2.在IE的位置上效果不好。谢谢和问候。 @Giberno 我有一个关于#2not worked well in IE position. 的问题你是说它在IE 中不起作用吗？你用的是什么版本的IE？ cleditor 甚至在 IE10 中为我加载，我可以调查一下，但似乎是插件本身的问题。
@Giberno 你可以查看我的最新更新，这大概是我能做的最好的了，你想要的 Drag and drop 功能与 WYSIWYG 编辑器在寻求浏览器兼容性时很难使用.
@revor，它现在可以工作了，顺便说一句，var $editor = $("#input").cleditor()[0]; 是什么意思？【参考方案2】：
这个问题的解决方案：
$("#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
);
【讨论】：
一个项目一旦拖动就不能再拖动了jsfiddle.net/aamir/3PAv9/8 jsfiddle.net/8Jwxv/42/-- 只需检查此链接即可。可以任意多次拖动。不受限制 @chinnu，你的代码可以将item拖入iframe，但位置混乱，item应该插入WYSIWYG编辑器写句子，而不是任何地方。如果我再次拖动它（在 iframe 部分），它将复制更多，而不是移动。以上是关于jquery ui可拖动可排序元素到iframe中的主要内容，如果未能解决你的问题，请参考以下文章