Question

我目前正试图解决这个问题。

我有两个清单;一个是可拖动的列表，另一个是可排序的和可放置的。我想通过在原始列表项前加上一些代码表明它已被添加到另一个列表中来表示成功下载到我的可排序列表中。我可以通过调用draggable上的stop函数（它在我的小提琴上注释掉）来解决这个问题，问题是它也会对无效丢弃或丢失的项目执行此操作。

似乎可排序和可放置的任何函数（事件，ui）仅引用结束第二个列表的项目。我需要更新原始“拖动”列表中的项目。

我的片段：

<div id="tabs2" class="list pre">
  <ul>
    <li><a href="#otherlist">1</a></li>
    <li><a href="#cdaMed">2</a></li>
  </ul>

  <div id="otherlist" class=".ui-tabs .ui-tabs-panel">
    <ul class="list">
      <li>Simvastatin 20 mg tablet by mouth once daily</li>
      <li>Lorazepam 0.5 mg tablet by mouth three times daily</li>
      <li>Insulin Glargine (or Lantus) 10 units once daily</li>
    </ul>
  </div>

  <div id="cdaMed" class=".ui-tabs .ui-tabs-panel">
    <ul class="list">
      <li>Insulin Glargine (or Lantus) 10 units once daily</li>
      <li>Metoprolol Tartrate 50 mg tablet by mouth once daily</li>                   
      <li>Warfarin Sodium 5 mg tablet by mouth once daily Monday, Wednesday, Friday, Sunday</li>
      <li>Warfarin Sodium 2.5 mg tablet by mouth once daily Tuesday, Thursday, Saturday</li>
    </ul>
  </div>

</div>

<div class="scratch">
  <ul id="medsScr" class="list">
    <li><a class="close"></a>Simvastatin 20 mg tablet by mouth once daily</li>
    <li><a class="close"></a>Lorazepam 0.5 mg tablet by mouth three times daily</li> 
    <li><a class="close"></a>Insulin Glargine (or Lantus) 10 units once daily</li>
  </ul>
</div>

我的jquery：

$('#tabs, #tabs2, #tabs3').tabs({ active: 1 });

$( "#cdaMed .list li" ).draggable({ 
        cursor: "move", 
        helper: "clone", 
        opacity: 0.7,
        connectToSortable: "#medsScr",
        stack: ".list",
        revert: "invalid"

        /*,
        stop: function( event, ui ) {
            var $target = $(event.target);

            $target.prepend('<span class="drug"></a>');
            $target.draggable('disable');

        } */
});


$('#medsScr').sortable({
  forcePlaceholderSize: true,
  cursor: "move",
  connectWith: "#cdaMed",
  receive: function(e, ui) {

    var undo = $(this).siblings('.sc_menu').find('.undo');
    var start = $(this).siblings('.sc_menu').find('.so');
    var newitem = $(this).children('li.ui-draggable');

    //undo.addClass('on');
    //start.addClass('on');
    newitem.prepend('<a class="close"></a>').removeClass('ui-draggable');
  }

});

 $('#medsScr.list li').droppable({
    accept: ".ui-draggable",
    addClass: false,
    tolerance: "touch",
    drop: function( d, ui ) {
        var $drug = $(event.target);
        $drug.prepend('<span class="drug"></a>');
    }

});

这是jsfiddle。

谢谢，关于如何解决这个问题的任何想法都非常感激。

Answer 1

一个简单的解决方案是在外部块中有一个var $target，然后执行：

start: function( event, ui ) {
   $target = $(event.target);
}

然后，您可以将这些行移至receive()：

$target.prepend('<span class="drug"></a>');
$target.draggable('disable');

或者，请注意，如果删除成功，则会在receive()之前调用stop()。因此，外部区块中的var success可以设置为false中的start()和true中的receive();然后检查stop()是否为true。如果是这样，那么你知道收到了阻力。

Jquery UI：如何表示可拖动成功放入可排序的？

1 个答案: