취소 가능한 정렬 가능한 이벤트를 중지하는 방법

Question

나는 draggable 목록과 sortable 목록을 가지고 있습니다. draggable 목록에는 가능한 모든 항목이 있습니다. sortable 목록은 사용자가 선택한 것입니다.

sortable에 receive에 대한 검사를 수행하여 항목이 이미 있는지 확인하고, 그렇다면 정렬을 중지하고 revert 항목을 드래그 할 수있는 목록으로 되돌리려합니다. 그러나 cancel 이벤트가 발생해도 update 이벤트가 계속되고 되돌리기가 발생하지 않습니다.

무엇이 누락 되었습니까?

는 여기에 바이올린입니다 : http://jsfiddle.net/XW48M/1/

HTML :

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-5"> 
      <ul id="teams" class="list-group"> 
       <li class="list-group-item poll-assets" data-id="1" data-name="Team 1">Team 1</li> 
       <li class="list-group-item poll-assets" data-id="2" data-name="Team 2">Team 2</li> 
       <li class="list-group-item poll-assets" data-id="3" data-name="Team 3">Team 3</li> 
      </ul> 
     </div> 
     <div class="col-md-5"> 
      <ul id="poll" class="list-group"> 
       <li id="1" class="list-group-item poll-item" data-id="1" data-name="Team 1">Team 1</li> 
       <li id="4" class="list-group-item poll-item" data-id="4" data-name="Team 4">Team 4</li> 
       <li id="5" class="list-group-item poll-item" data-id="5" data-name="Team 5">Team 5</li> 
      </ul> 
     </div> 
    </div> 
</div> 

자바 스크립트 : 당신은 드래그 + 정렬 대신이 연결 sortables 갔다 왜 아주 이해가 안

$(document).ready(function() { 
    $("#poll").sortable({ 
     revert: true, 
     update: function (event, ui) { 
      console.log('update'); 
      var order = $("#poll").sortable("toArray"); 
      if ($(ui.item).hasClass('ui-draggable')) { 
       $(ui.item).addClass('poll-item').removeClass('ui-draggable draggable').attr('id', $(ui.item).data('id')); 
      } 
     }, 
     receive: function (event, ui) { 
      console.log('receive'); 
      var order = $("#poll").sortable("toArray"); 
      var id = $(ui.item.data('id')); 
       if ($.inArray(id, order)) { 
       $("#poll").sortable('cancel'); 
       console.log('CANCELLED'); 
       return; 
      } else { 
       $(ui.item).remove(); 
      } 
     } 
    }).disableSelection(); 

    $('#teams') 
     .find('.poll-assets').draggable({ 
     opacity: 0.75, 
     appendTo: document.body, 
     helper: 'clone', 
     connectToSortable: '#poll', 
    }).disableSelection(); 
}); 

Answer 1

HTML :

<div class="leftDiv"> 
    <div class="item item1">Item 1</div> 
    <div class="item item2">Item 2</div> 
    <div class="item item3">Item 3</div> 
    <div class="item item4">Item 4</div> 
    <div class="item item5">Item 5</div> 
    <div class="item item6">Item 6</div> 
</div> 
<div class="rightDiv"> 

</div> 

JS :

$(document).ready(function(){ 
    $(".leftDiv .item").draggable({ 
     helper: function(ev, ui) { 
      return "<span class='helperPick'>"+$(this).html()+"</span>"; 
     }, 
     connectToSortable: ".rightDiv" 
    }); 

    $(".rightDiv").sortable({ 
     'items': ".item", 
     'receive': function(event, ui){ 
      // find the class of the dropped ui, look for the one with the integer suffix. 
      var clazz = getClassNameWithNumberSuffix(ui.item); 
      $('.leftDiv .' + clazz).draggable("option", "revert", true) 
      if($('.rightDiv .' + clazz).length > 1){ 
       $('.rightDiv .' + clazz + ':not(:first)').remove();     
      } 
     } 
    }); 

}); 

function getClassNameWithNumberSuffix(el) { 
    var className = null; 
    var regexp = /\w+\d+/; 
    $($(el).attr('class').split(' ')).each(function() { 
    if (regexp.test(this)) { 
     className = this; 
     return false; 
    } 
    }); 

    return className; 
} 

CSS :

.leftDiv, .rightDiv {width:120px; float:left; border:1px solid #000; padding:5px; margin:10px; min-height:130px} 
.rightDiv {margin-left:40px} 

.item {height:20px; line-height:20px; text-align:center; border:1px solid #EEE; background-color:#FFF} 

.helperPick {border:1px dashed red; height:20px; line-height:20px; text-align:center; width:120px} 

출처 : http://jsfiddle.net/perrytew/RxKkA/3/가 미래를 위해 보존 될 수 있도록

Answer 2

.

그래서 난이 방법을 사용하여 그것을 시도주고 내가 그런 일 나왔다에 이벤트를받을 수 있기 때문에,

$("#teams").sortable({ 
    revert: true, 
    connectWith: "#poll", 
    start: function() { 
     console.log('start'); 
     var order = $('#poll').sortable("toArray", { 
      attribute: "data-id" 
     }); 
     $('#poll').data('order', order); 
    } 
}).disableSelection(); 


$("#poll").sortable({ 
    revert: true, 
    receive: function (event, ui) { 
     console.log('receive'); 
     var order = $('#poll').data('order'); 
     var id = $(ui.item).data('id').toString(); 
     if ($.inArray(id, order) != -1) { 
      console.log('CANCELLED'); 
      $(ui.sender).sortable("cancel"); 
     } else { 
      console.log('NOT CANCELLED'); 
     } 
    } 
}).disableSelection(); 

홈페이지 문제가 올바른 항목 배열을 얻을 수 있었다, 배열은 이미 업데이트됩니다 "새로 추가 된"항목. 다른 정렬 가능 이벤트의 시작 이벤트에 데이터를 넣고 이벤트를 수신 할 때 다시 가져와야했습니다.

난 아직도 매우 만족하지 몇 가지 찾을 수

: 시작 내부

• 사용하여 ID 선택기 및 콜백을받을; 하지만 이벤트 인수는 내가 예상 한 무엇을 얻을 수있는 가장 가까운,

어쨌든 이상한 내가 되돌리기 효과는 매우이다

필요한 요소를 ... 포함하지 않았다; 나는 또한 당신이 검사 할 jsfiddle를 만들었다.

더 나은 결과를 얻을 수 있으면 코드를 도움/게시할지 알려주세요.