如何使用jQuery-UI将内容编辑器作为可拖放的目标？

时间：2011-08-04 作者：Scott B

我正在尝试使用jQuery UI拖放将WordPress内容编辑器启用为可拖放。但是，我无法使drag-to-drop或drop事件启动。

我有什么遗漏吗？

<ul id="keywords">
    <li>drag one</li>
    <li>drag two</li>
    <li>drag three</li>
</ul>

jQuery("#keywords").find("li").each(function(){jQuery(this).draggable(
{ 
    helper:\'clone\', 
    start: function(event, ui){
        jQuery(this).fadeTo(\'fast\', 0.5);}, 
        stop: function(event, ui) { 
            jQuery(this).fadeTo(0, 1); 
            } 
        });
    });

jQuery(\'#content\').droppable(
{ 
    drop: function(event, ui)
    {
        alert(\'dropped in content\'); //DOES NOT FIRE!!!
        jQuery(this).dropIt(ui.draggable.html());
    } 
});

if(typeof tinyMCE==\'object\')
{ 
    alert(\'tinyMCE is active\'); //DOES NOT FIRE!!!
    jQuery(\'#editorcontainer\').droppable(
    { 
        drop: function(event, ui) 
        { 
        alert(\'dropped in tinyMCE editor\'); //DOES NOT FIRE!!!
        //Dynamically add content
        tinyMCE.activeEditor.execCommand(\'mceInsertContent\', false, \'New content.\');
        } 
    });
}

2 个回复
最合适的回答,由SO网友:cheesypeanut 整理而成

在上述示例中，以下行：

jQuery(".myDiv").find("li").each(function(){
应为：

jQuery(".keywords").find("li").each(function(){
这将允许拖放列表项。

要允许将项目拖放到TinyMCE文本区域，请使用以下代码。

$(\'#editorcontainer\').droppable({ 
    drop: function(event, ui) { 
        alert(\'dropped\'); //NOW FIRES!
        //Dynamically add content
        tinyMCE.activeEditor.execCommand(\'mceInsertContent\', false, \'New content.\');
    } 
});

SO网友:Toccos

试着像这样在TinyMCE body的标签上声明，它对我有用

在tiny\\u mce\\u src上。js公司

t.iframeHTML += \'</head><body ondrop="parent.drop(event);"  " id="\' + bi + \'" class="mceContentBody \'+ t.id +\'_cl\' + bc +\'" onload="window.parent.tinyMCE.get(\\\'\' + t.id + \'\\\').onLoad.dispatch();"><br></body></html>\';
在编辑页面上：

    function drop(ev)
    {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            tinyMCE.execCommand(\'mceInsertContent\',true,data);
    }
    function allowDrop(ev) {
            ev.preventDefault();
    }

    function drag(ev) {
            var html = $(\'#\'+ev.target.id).html();
            ev.dataTransfer.setData("Text",html);
    }
将jquery与TinyMCE一起使用似乎不起作用。。。

结束
标签： jquery   tinymce   jquery-ui   小码农  

相关推荐

使用jQuery可排序控制附件菜单顺序

我已经创建了一个元盒，它允许我上传并获取图像，然后还能够添加jquery ui sortable以对图像进行排序，但是我不知道如何添加实际功能以保存排序顺序。如果有人有一个想法如何实现这一点或一些教程，将是有益的，请分享，我无助地停留在这里。谢谢编辑：基本上，我需要知道的是如何将jQuery sortable与处理不同附件菜单\\u顺序的功能联系在一起。