1

我使用 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事件来创建可以完成所有这些操作的东西 - 我在下面添加了它作为答案 - 但我想要一些我现有的解决方案不提供的东西：

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

谁能建议如何最好地实施这些？

4

2 回答 2

1

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

我想您已经尝试将调色板的可排序助手设置为“克隆”？

var SortParams = {
  ...,
  helper: "clone",
}
于 2009-12-15T16:32:40.740 回答
0

这是我目前的解决方案：

<!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>
于 2009-11-21T15:36:29.573 回答