如何拖动元素并放入kendoSortable列表?

时间:2014-08-15 18:33:07

标签: javascript jquery kendo-ui telerik kendo-draggable

我正在尝试从kendoSortable的站点拖出一个元素并将其放入kendoSortable。

我设置了kendoSortable的 connectWith 属性。但它没有用。

在Kendo UI演示中,我没有找到这种示例。

这是我的代码:

<h1>Sortable</h1>


<ul id="sortable">
      <li class="list-item">Apples</li>
      <li class="list-item">Grapefruits</li>
      <li class="list-item">Bananas</li>
  </ul>

  <h1>Dragable</h1>
  <ul id="dragable">
      <li class="list-item">D1</li>
      <li class="list-item">D2</li>
      <li class="list-item">D3</li>
  </ul>

 <script>
     $("#sortable").kendoSortable({
        connectWith: "#dragable",
        placeholder: function placeholder(element) {
            return $("<li class='list-item' id='placeholder'>Drop Here!</li>");
        },
    });

     $("#dragable li").kendoDraggable({
        hint: function () {
            return $("<li class='list-item' id='placeholder'>GOOOOOO!</li>");
        }
    });

    $("#sortable").kendoDropTarget({
        dragenter: function () {
            console.log("enter");
        },
        dragleave: function () {
            console.log("leve");
        },
        drop: function (e) {

        }
    });
  </script>

dojo.telerik

1 个答案:

答案 0 :(得分:1)

鉴于你的两个清单:

<h1>Sortable</h1>
<ul id="sortable">
  <li class="list-item">Apples</li>
  <li class="list-item">Grapefruits</li>
  <li class="list-item">Bananas</li>
</ul>

<h1>Dragable</h1>
<ul id="dragable">
  <li class="list-item">D1</li>
  <li class="list-item">D2</li>
  <li class="list-item">D3</li>
</ul>

并假设您要将其从第二个(#draggable)复制到第一个(#sortable),您应该在第二个(副本的原点)定义connectWith ):

  $("#sortable").kendoSortable({
      placeholder: function placeholder(element) {
          return $("<li class='list-item' id='placeholder'>Drop Here 1!</li>");
      }
  });

  $("#dragable").kendoSortable({
      connectWith: "#sortable",
      placeholder: function placeholder(element) {
          return $("<li class='list-item' id='placeholder'>Drop Here 2!</li>");
      }
  });

同样重要的是要注意placeholder可能都在两者中定义。当您从此列表移动时使用第一个,而当原点位于第二个列表中时使用第二个(无论丢弃是第一个还是第二个)。

您可以在此处查看:http://dojo.telerik.com/@OnaBai/oJIy