Предельное количество элементов в сортируемом соединении с перетаскиваемыми и droppable

Question

У меня есть сортируемые, связанные перетаскивания, а также droppable. Это в основном ведро и сортируемый список предметов. Я хочу ограничить количество элементов, которые вы можете перетащить из ведра в список.

Моя проблема в том, что я получил как можно больше перетаскиваемого, если количество элементов в списке - высокое. Также я удаляю элемент из списка, чтобы он не застрял там. Но вот моя проблема. Событие обновления сортируемых огней продолжается. Поэтому, когда событие обновления срабатывает, элемент был удален уже, поэтому есть меньше элементов, чем разрешено. Я не хочу этого, когда я обновляю свою базу данных в событии обновления.

Я знаю, что на этот вопрос был дан ответ, но сначала прочитайте весь вопрос.

Вот HTML:

<fieldset id="container"> 
<div style="float: left; width: 49%;"> 
    <fieldset class="choosen" style="float: left; width: 100%;"> 
     <legend>choosen</legend> 
     <div style="overflow-y: auto; height: 40em;" class="box"> 
      <ul style="min-height: 40em;" class="imglist grey sortable"> 
       <li data-id="1" class="acceptable">Element1</li> 
       <li data-id="2" class="acceptable">Element2</li> 
       <li data-id="3" class="acceptable">Element3</li> 
      </ul> 
     </div> 
    </fieldset> 
</div> 
<div style="float: left; margin-left: 2%; width: 49%;"> 
    <fieldset class="bucket" style="float: left; width: 100%;"> 
     <legend>bucket</legend> 
     <div style="overflow-y: auto; height: 40em;" class="box droppable"> 
      <ul style="min-height: 40em;" class="imglist grey"> 
       <li data-id="5" class="draggable"><a>Element5</a> 

       </li> 
       <li data-id="6" class="draggable"><a>Element6</a> 

       </li> 
       <li data-id="7" class="draggable"><a>Element7</a> 

       </li> 
       <li data-id="8" class="draggable"><a>Element8</a> 

       </li> 
      </ul> 
     </div> 
    </fieldset> 
</div> 

Вот код JQuery:

var helperClone = function (event, object) { 
    if (undefined == object) { 
     var helper = $(this).clone(), 
      height = $(this).height(), 
      width = $(this).width(); 
    } else { 
     var helper = object.clone(), 
      height = object.height(), 
      width = object.width(); 
    } 
    helper.css({'width': width, 'height': height}); 
    return helper; 
}, 
sortable = $(".sortable"), 
draggable = $(".draggable"), 
revertCheck = function() { 
    console.log("revertCheck", sortable.find("li").length > 4, sortable.find("li").length); 
    if (sortable.find("li").length > 4) { 
     return true; 
    } 
    return false; 
}; 
draggable.draggable({ 
    connectToSortable: sortable, 
    helper: helperClone, 
    revert: revertCheck 
}); 
sortable.sortable({ 
    placeholder: "ui-state-highlight", 
    helper: helperClone, 
    receive: function (event, ui) { 
     console.log("receive", $(this).find("li").length < 4,  $(this).find("li").length); 
     if ($(this).find("li").length < 4) { 
      ui.item.remove(); 
      $(this).data().uiSortable.currentItem.addClass('acceptable').css({ 
      'width': '100%', 
       'height': 'unset' 
     }); 
    } else { 
     ui.helper.remove(); 
    } 
}, 
update: function (event, ui) { 
    console.log("update", $(this).find("li").length < 4, $(this).find("li").length); 
    if ($(this).find("li").length < 4) { 
     //do stuff 
     console.log("update fired"); 
    } else { 
     console.log("update didn't fire"); 
     ui.item.effect('highlight', { 
      color: 'red' 
     }); 
     } 
    } 
}); 

$(".droppable").droppable({ 
    accept: 'li.acceptable', 
    over: function (event, ui) { 
     $(this).effect('highlight'); 
    }, 
    drop: function (event, ui) { 
     var target = $(this).find('ul'); 
     var clone = ui.draggable.clone().css({ 
      'display': 'list-item', 
       'position': 'unset' 
     }); 
     ui.draggable.remove(); 
     clone.appendTo(target).show().removeClass('acceptable').draggable({ 
      connectToSortable: sortable, 
      containment: "#container", 
      helper: helperClone, 
      revert: revertCheck 
     }); 
    } 
}); 
$("ul, li").disableSelection(); 

Вот рабочий пример: http://jsfiddle.net/adq6exkp/

Другие ответы рекомендуем обратиться sortable.sortable("cancel"); в событие получения сортировки. Таким образом, в приведенном выше коде вы бы добавить это к еще часть функции приема события:

$(ui.sender).sortable('cancel'); 

Проблема здесь возникает следующее сообщение об ошибке:

Error: cannot call methods on sortable prior to initialization; attempted to call method 'cancel' http://code.jquery.com/jquery-1.10.1.js Line 516

Вот рабочий пример этой ошибки: http://jsfiddle.net/adq6exkp/1/

Answer 1

Если я понимаю, вы не хотите, чтобы обновление срабатывало, если произошла реверсия.

Вы можете выполнить это с помощью boolean.

sortable.sortable({ 
    placeholder: "ui-state-highlight", 
    helper: helperClone, 
    receive: function (event, ui) { 
     console.log("receive", $(this).find("li").length < 4, $(this).find("li").length); 
     if ($(this).find("li").length < 4) { 
      ui.item.remove(); 
      $(this).data().uiSortable.currentItem.addClass('acceptable').css({ 
       'width': '100%', 
        'height': 'unset' 
      }); 
     } else { 
      this.reverted = true; 
      ui.helper.remove(); 
     } 
    }, 
    update: function (event, ui) { 
     console.log("update", $(this).find("li").length < 4, $(this).find("li").length); 
     if (!this.reverted) { 
      //do stuff 
      console.log("update fired"); 
     } else { 
      this.reverted = false; 
      console.log("update didn't fire"); 
      ui.item.effect('highlight', { 
       color: 'red' 
      }); 
     } 
    } 
}); 

Fiddle

Answer 2

Вы можете обрабатывать helper удаление в update случае. Таким образом, количество элементов в списке согласовано как на receive, так и на update. Но поскольку у вас нет доступа к helper в событии update, вам необходимо его сохранить раньше. Это можно сделать по событию receive. Таким образом:

receive: function (event, ui) { 
     //store current helper 
     cur_helper = ui.helper; 
     console.log("receive", $(this).find("li").length < 4, $(this).find("li").length); 
     if ($(this).find("li").length < 4) { 
      ui.item.remove(); 
      $(this).data().uiSortable.currentItem.addClass('acceptable').css({ 
       'width': '100%', 
        'height': 'unset' 
      }); 
     } 
    }, 
    update: function (event, ui) { 
     console.log("update", $(this).find("li").length < 4, $(this).find("li").length); 
     if ($(this).find("li").length < 4) { 
      //do stuff 
      console.log("update fired"); 
     } else { 
      //remove the helper if the list exceeds 3 
      cur_helper.remove(); 
      console.log("update didn't fire"); 
      ui.item.effect('highlight', { 
       color: 'red' 
      }); 
     } 
    } 

скрипку: http://jsfiddle.net/p0nft4mj/