Question

我使用jQuery UI的默认可排序/可拖动功能进行了简单的设置。

我现在需要添加一个'调色板'，它将是所有列表中所有项目的列表（以及可能不在任何列表中的一些列表）。像这样：

<ul id="palette" class="ui-sortable">
 <li class="used">A</li>
 <li>B</li>
 <li class="used">C</li>
 <li class="used">D</li>
 <li>E</li>
 <li>F</li>
</ul>

<ol id="box1" class="ui-sortable box">
 <li>A</li>
 <li>D</li>
</ol>

<ol id="box2" class="ui-sortable box">
</ol>

<ol id="box3" class="ui-sortable box">
 <li>C</li>
</ol>

目前，调色板没有做任何不同的事情 - 拖入和移出的项目只是移动它们。

我需要的功能是当我拖出调色板时，它会复制而不是移动，当我拖入调色板时，它会从源列表中删除但不会添加到调色板中。（这些框可以存储多个调色板项目副本。）

我已经使用了sortable的receive事件来创建完成所有这些的事情 - 我已经在下面添加了一个答案 - 但是我想要一些我现有解决方案无法提供的事情：

从拖动开始（而不是在删除后恢复）保留（视觉上，至少）调色板中的项目。
保留原始调色板顺序，防止可排序性（但保留从盒子连接它的能力）。

有人可以建议如何最好地实施这些吗？

Answer 1

保留（视觉上，至少）调色板中的项目从拖动开始（而不是在放下后恢复）。

我认为你已经尝试将调色板的可排序助手设置为'克隆'？

var SortParams = {
  ...,
  helper: "clone",
}

Answer 2

这是我目前的解决方案：

<!DOCTYPE html>

 <title>jQuery UI Sortable / Palette test</title>

 <style>
  *{margin:0;padding:0;}

  ul,ol
  {list-style: none;}

  #palette
  {
   display: block;
   width: 114px;
   margin: 5px;

   float:left;clear:none;

   background: yellow;
  }

  .box
  {
   display:block;
   width: 114px;
   min-height: 5em;
   margin: 5px;

   float: left; clear:none;

   background:silver;
  }

  .box li,#palette li
  {
   display: block;
   width: 32px;
   height: 32px;
   margin: 2px;

   float: left; clear:none;

   text-align: center;
   border: solid 1px black;
  }

  #palette li{font-weight:bold}
  #palette li.used{font-weight:normal}

  #palette .ui-sortable-placeholder
  {
   display:none;
  }

 </style>

 <script src="jquery-1.3.2.min.js"></script>
 <script src="jquery-ui-1.7.2.custom.min.js"></script>

 <script>
  $j = jQuery.noConflict();

  $j(document).ready(init);

  function init()
  {
   var SortParams =
   { connectWith:'.box,#palette'
   , dropOnEmpty:true
   , receive: doPaletteMagic
   }

   $j('.box,#palette').sortable( SortParams )
  }

  function doPaletteMagic( event , ui )
  {
   if ( ui.sender.is('#palette') )
   {
    ui.item
     .clone()
     .addClass('used')
     .appendTo('#palette')

    // TODO: fix #palette ordering
   }
   else
   if ( ui.item.parent().is('#palette') )
   {
    var ItemContent = ui.item.text();

    ui.item.remove()

    if ( ! isUsed( ItemContent ) )
    {
     $j('#palette li:contains('+ItemContent+')')
      .removeClass('used')
      ;
    }

   }
  }

  function isUsed(Content)
  {
   return ($j('.box li:contains('+Content+')').length > 0)
  }

 </script>

<body>

 <ul id="palette" class="ui-sortable">
  <li class="used">A</li>
  <li>B</li>
  <li class="used">C</li>
  <li class="used">D</li>
  <li>E</li>
  <li>F</li>
 </ul>

 <ol id="box1" class="ui-sortable box">
  <li>A</li>
  <li>D</li>
 </ol>

 <ol id="box2" class="ui-sortable box">
 </ol>

 <ol id="box3" class="ui-sortable box">
  <li>C</li>
 </ol>

 <br class="break"/>

</html>

jQuery UI可排序/可拖动 - 带调色板（复制/删除而不是移动）

2 个答案: