JQuery UI: Как указать успешное падение перетаскиваемого на сортируемый?

0

Я в настоящее время застреваю, пытаясь понять это.

У меня есть два списка; один - перетаскиваемый список, другой - сортируемый и droppable. Я хотел бы указать успешное падение в моем отсортированном списке, добавив исходный элемент списка с небольшим количеством кода, который показывает, что он был добавлен в другой список. Я могу заставить это работать, вызвав функцию остановки на draggable (она прокомментировала мою скрипку), проблема в том, что она также делает это с элементами с недействительными падениями или промахами.

Кажется, что любая функция (событие, ui) на сортируемом и droppable относится только к элементу, который заканчивает второй список. Мне нужно обновить элемент в исходном списке "перетаскиваемый".

У меня есть:

<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 для этого.

Спасибо, любые мысли о том, как исправить это, очень ценятся.

  • 0
    Вы можете использовать ui.item в своей функции приема. Как этот $ (ui.item) .prepend ('<span class = "drug"> </a>');

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 которая получает значение false в start() и true в receive(); затем проверьте в stop() если это true. Если это так, то вы знаете, что было получено перетаскивание.

  • 0
    Когда вы говорите, внешний блок, что вы имеете в виду? Я все еще начинающий JQuery ...
  • 0
    Удивительно, что сделал это !!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню