使用jQuery移动列表项目的问题

我一直在试图弄清楚这一点，但我没有取得太多的进展。我想要两个列表，并通过双击移动它们之间的列表项。如果我有一个事件是“点击”，而另一个是“dblclick”，我可以使用它，但那不是我想要的。如果我在两种方法中附加“dblclick”事件，则列表项不会移动，只会在当前列表中重新排序。这是一个展示我的问题的JSFiddle。我现在已经安装了，所以一个事件是“点击”，另一个是“dblclick”。如果您将实时功能中的参数更改为“单击”，以便与其他处理程序匹配，您将看到我遇到的问题。使用jQuery移动列表项目的问题

HTML

<div id="orig"> 
<ul> 
    <li class="original">one</li> 
    <li class="original">two</li> 
    <li class="original">three</li> 
</ul> 
</div> 
<div id="moved"> 
    <ul> 

    </ul> 
</div>

CSS

#orig { 
    width: 40%; 
    height: 300px; 
    overflow: auto; 
    float: left; 
    border: 1px solid black; 
} 

#moved { 
    width: 40%; 
    height: 300px; 
    overflow: auto; 
    float: right; 
    border: 1px solid black; 
}

jQuery的

$(function() { 
    $(".original").click(function(){ 
     this.className = "moved"; 
     $("#moved ul").append(this); 
    }); 

    $(".moved").live("dblclick", function() { 
     this.className = "original"; 
     $("#orig ul").append(this); 
    }); 

});

这里是一个JSfiddle

来源

2013-05-02 MikeHe

我相信你可能已经遗漏了你的代码。 jsFiddle可能不会在堆栈溢出时发生.. – George 2013-05-02 14:47:55

对不起。这是我第一次发布，我不熟悉界面，并没有看到任何方式来预览我发布的内容。 – MikeHe 2013-05-02 14:49:37

我已经为你做了。在提交之前，您的问题有预览，在您创建它的位置下方。 – George 2013-05-02 14:50:17

您可以使用on方法，live已经弃用：

$("#orig").on("dblclick", "li", function() { 
    $("#moved ul").append(this); 
}); 

$("#moved").on("dblclick", "li", function() { 
    $("#orig ul").append(this); 
});

http://jsfiddle.net/zmnAm/6/

另外，你也可以让它变得更短，如果你一个类设置为您div容器：

$container = $('.container').on('dblclick', 'li', function(e) { 
    $container.not(e.delegateTarget).find('ul').append(this); 
});

http://jsfiddle.net/zmnAm/7/

来源

2013-05-02 14:51:10 dfsq

我将jQuery更新为1.9.1并使用你的第一个代码示例。它奇妙地工作。谢谢！我使用1.8.3是因为我遇到了@ Ajax.ActionLink（）的问题，但现在我可以开始研究这个问题了。 – MikeHe 2013-05-02 15:01:48

-1

当您将您的事件处理程序应用于您的列表项时，它们会一直保留在这些元素上。当你点击左边项目上的一个项目，然后点击右边列表中的相同项目，它仍然是同一个项目，并且你点击了相同的事件处理程序，所以它仍然会被移动到正确的项目上，它已经在。

您可能必须从刚刚单击的项目中删除原始处理程序，并将另一个附加到该项目。

来源

2013-05-02 14:50:55

使用jQuery移动列表项目的问题

回答

相关问题