拖动，删除，排序，克隆和更改类不起作用

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').attr('class').indexOf("droppedlimusic")){
    //dialog show
}

使用：

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

因为如果你的元素有另一个类（比如，我不知道，＆＃39;播放＆＃39;或者＆＃39;黄色＆＃39;或者＆＃39; whatyouwant＆＃39;）{{ 1}}等于$('#music').attr('class')，与droppedlimusic playing

不同

droppedlimusic

希望这会成功 我不知道你是否要编辑你在$（this）上删除元素的div的类或者你要删除ui.draggable的元素

Answer 2

我认为这就是你要找的东西..

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