0

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

我有两个清单；一个是可拖动的列表，另一个是可排序和可放置的。我想通过在原始列表项前面加上一些代码来表明它已成功放入我的可排序列表，这表明它已被添加到另一个列表中。我可以通过在可拖动对象上调用停止函数（它在我的小提琴上被注释掉）来使它工作，问题是它也会对具有无效丢弃或未命中的项目执行此操作。

似乎 sortable 和 droppable 上的任何函数（事件、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。

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

4

1 回答 1

0

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

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

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

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

或者，请注意，如果 drop 成功，receive()将在之前调用stop()。因此，您可以var success在外部块中设置一个falseinstart()和truein receive()；然后检查stop()是否是true。如果是这样，那么您就知道收到了阻力。

于 2013-11-12T20:45:07.420 回答