拖放、排序、克隆和更改类不起作用

Question

这就是我想要完成的事情

（2.0 版新代码更新）

我正在尝试创建一个包含 2 列的模块。一左一右。我希望将左列中的按钮放入右侧以更改类。当左侧的按钮放在右侧时，我希望它们调用一个动画类，该类是按定义的，可以在更大的图像中转换。然后这些框将可以拖放到右栏中。

我再次需要这个模块来拖放、克隆、排序和更改类。除了换班外，我什么都想通了。我已经为此工作了一段时间，因此非常感谢任何见解。谢谢。

---

这是一张图片和我的代码

这是我想要完成的工作的图片 - Twitter Pic。

这里是my new fiddle for this project。

---

建议的代码不起作用

这是我根据这篇文章中的建议更改 javascript 的最新努力。该脚本仍然无法正常工作。我明白我想要做什么，但缺少一些东西。有什么帮助吗？

$('ui-sortable-handle').droppable({
    drop: function(event, ui) {
       if($(this).attr('id').indexOf('music')){
       $(this).addClass("droppedlimusic");
    }
        else if($(this).attr('id').indexOf('nav')){
       $(this).addClass("droppedlinav");
    }
},
over: function(event, ui) {},
out: function(event, ui) {}
});

以下代码是我工作的第 3 版，但仍然无法正常工作......叹息......

$("#left-pane li").draggable({
    containment: '#gbox',
    cursor: 'move',
    helper: 'clone',
    scroll: false,
    connectToSortable: '#right-pane',
    appendTo: '#right-pane',
    start: function () {},
    stop: function (event, ui) {}
}).mousedown(function () {});

$("#right-pane").sortable({
    sort: function () {},
    placeholder: 'ui-state-highlight',
    receive: function () {},
    update: function (event, ui) {}
});

$("#right-pane li").live('dblclick', function () {
    $(this).remove();
})

$("#right-pane").droppable({
    accept: "#left-pane li",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        if ($(ui.draggable).find('.single-item').length == 0) {
            $(ui.draggable).append("<div class='single-item'><input type='text' class='item-title' /><br /><textarea class='item-text'></textarea></div>");
        }
    }
});

$("#left-pane").droppable({
    accept: "#right-pane li",
    drop: function (event, ui) {}
});

$("ul, li").disableSelection();

原始模块 HTML

<div class="wrapper">
    <div class="left-column">
        <ul id="left-pane">
            <li class="music"><a href=""><img src="http://www.natebal.com/images/seo.jpg" width="55px" /></a></li>
            <li class="nav"><a href=""><img src="http://www.natebal.com/images/social-networks.jpg" width="55px" /></a></li>
            <li class="phone"><a href=""><img src="http://www.natebal.com/images/sweet-web-development.jpg" width="55px" /></a></li>
        </ul>
    </div>
    <div class="right-column">
        <ul id="right-pane"></ul>
    </div>
</div>  

Answer 1

我想这就是你要寻找的东西..

if($('#music').hasClass('droppedlimusic')){
   //your code
}

Answer 2

而不是使用

if($('#music').attr('class').indexOf("droppedlimusic")){
    //dialog show
}

使用：

if( $("#music").hasClass('droppedlimusic') )

因为如果你的元素有另一个类（比如，我不知道，'playing' 或 'yellow' 或 'whatyouwant'）$('#music').attr('class') 等于 droppedlimusic playing，这与 droppedlimusic 不同

$( "yourdroppable item" ).droppable({
    drop: function( event, ui ) {
        if($(this).hasClass('yourclass')){
           $(this)
           .attr('id', "your id")
           .removeClass("yourclass");
        }
    },
    over: function( event, ui ) {},
    out: function( event, ui ) {}
});

希望这能解决问题 我不知道您是要编辑将元素放在 $(this) 上的 div 的类还是要删除 ui.draggable 的元素