使用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移動列表項目的問題

回答

相關問題