使用jquery拖放 [英] drag and drop using jquery

问题描述

我有两个基于jquery的列表，sample是这里我需要完全相同的功能，但稍有改变如下：

我点击获取项目我得到所有的可排序项目值，但我想要的是从列表A拖动，并将它们列表B，反之亦然，如果我点击获取项目我应该只在列表B上而不是从列表A中获得可排序的项目。

如何做到这一点，我们可以定制上面的jquery lib或有任何其他，

解决方案

<

我已经做过类似的事情，这是我实现的方式： http://jsfiddle.net / dazefs / vGYVX /

 < div style =background-color：Gray> 
 
< ul id =sortable> 
< li> 
< span style =background-color：yellow> 
 Item 1 
< / span> 
 
< / li> 
< li> 
< span style =background-color：red> 
 Item 2 
< / span> 
 
< / li> 
< li> 
< span style =background-color：green> 
 Item 3 
< / span> 
 
< / li> 
< li> 
< span style =background-color：Blue> 
 Item 4 
< / span> 
< / li> 
< / ul> 
 
< ul id =sortable2style =width：60％> 
< li> 
< span style =background-color：yellow> 
 Item 5 
< / span> 
< / li> 
< li> 
< span style =background-color：red> 
 Item 6 
< / span> 
< / li> 
< li> 
< span style =background-color：green> 
 Item 7 
< / span> 
< / li> 
< li> 
< span style =background-color：Blue> 
 Item 8 
< / span> 
< / li> 
< / ul> 
 
< / div> 
  

  $（function（）{
 $（＃sortable，＃sortable2）。sortable（{
 connectWith：＃sortable2，#sortable，
 receive：function ，ui）{
 alert（'item has been sorted'）; 
} 
}）; 
 
 //}）
} 
  

要实现3个图块组：

http://jsfiddle.net/dazefs/XRdz6/ p>

http://jsfiddle.net/dazefs/vGYVX/

您必须稍微修改此实现，以便在单击GetItems后合并获取项目。

i have two lists which are based on jquery, sample is here i need exactly same functionality but with slightchanges like follows:

as per the above when i click on Get items i get all the sortable items values but what i want is drag from List A and put them to List B and vise versa, if i click on get items i should get only sortable items on List B not from List A.

how to do this, can we customise the above jquery lib or is there any other even if they are in java script it is fine for me.

Please do help.

解决方案

I have done something similiar in the past, this is how I achieved it: http://jsfiddle.net/dazefs/vGYVX/

<div style="background-color:Gray">

<ul id="sortable">
    <li>
      <span style="background-color:yellow">
         Item 1
       </span>

     </li>
    <li>
     <span style="background-color:red">
       Item 2
     </span>

    </li>
    <li>
      <span style="background-color:green">
     Item 3
     </span>

  </li>
    <li>
    <span style="background-color:Blue">
           Item 4
     </span>
     </li>
   </ul>

<ul id="sortable2" style="width:60%">
<li>
    <span style="background-color:yellow">
        Item 5
    </span>
</li>
    <li>
    <span style="background-color:red">
        Item 6
    </span>
</li>
    <li>
    <span style="background-color:green">
        Item 7
    </span>
   </li>
    <li>
       <span style="background-color:Blue">
          Item 8
       </span>
   </li>
</ul>

 </div>

$(function () {
    $("#sortable, #sortable2").sortable({
        connectWith: "#sortable2, #sortable",
        receive: function (event, ui) {
             alert('item has been sorted');
         }
    });

    //})
});

To achieve with 3 tile groups:

http://jsfiddle.net/dazefs/XRdz6/

http://jsfiddle.net/dazefs/vGYVX/

You will have to modify this implementation slightly to incorporate getting items after "GetItems" is clicked.

这篇关于使用jquery拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！