외부에서 녹아웃 정렬 드래그 앤 드롭

Question

누군가가 나를 도울 수 있습니다.
웹 응용 프로그램에서 큰보기가 있습니다. 왼쪽에는 제품 목록이 있고 오른쪽에는 범주 목록이 있습니다. 제품은 카테고리 내부로 드래그해야합니다.
제품 목록은 observableArray입니다. 목록에 1000 개 이상의 항목이 있으면 성능 문제가 발생합니다 (특히 IE에서). 그래서 제품 자체가 변경되지 않기 때문에, 우리는 그들을 녹아웃 바인딩에서 꺼내 문자열에 연결하고 하나의 노드 만 추가합니다. 여기

<div data-bind="sortable: {data: Products, beforeMove: $root.verifyProducts}, attr: { 'data-max': MaxProducts }"> 
<div class="menuEditTab2CatDragItem clearfix" data-bind="attr: { 'data-prodid': Id }"> 
    <div class="menuEditTab3ProdsNameText" data-bind="text: Name"></div> 
    <div class="pull-right" style="margin-left:8px;"><i style="margin-top:-4px;" class="icon-remove" data-bind="click: $parent.removeProduct"></i> 

    </div> 
    <div class="pull-left menuEditTab3ProdsIdText">ID: <span data-bind="text: Id"></span> 
    </div> 
</div> 

그리고의 제품 목록에 대한 JS 코드입니다 : 지금은 물론, 바인딩 정렬이 더 이상 작동하지 않습니다 녹아웃 ...

이 카테고리의 템플릿입니다 왼쪽 :

function fillAllProductsTab() { 
     var parts = ''; 
     allProducts.forEach(function (item) { 
      parts += '<div id="f_all_' + item.Id + '" >' + // draggable="{data: $data, options:{containment: \'\#menuEditTab3Ce\', revert: \'invalid\'}}" 
       '<div class="menuEditTab2CatDragItem">' + 
       '<div>' + item.Name + '</div><div class="clearfix menuEditTab3ProdsIdText">' + 
       '<div class="pull-left">ID: <span>' + item.Id + '</span></div><div class="pull-right">' + 
       '<span>' + item.Price + '</span> €</div></div></div></div>'; 
     }); 
     $("#allp").append(parts); 
    }; 

이제 나의 생각은 내가 수동으로 제품 목록에 드래그 플러그인 init을 한 후이를 추가 할 수 있었다 :

$('#allp > div').draggable({ 
     //connectToSortable: '#sortable', 
     helper: 'clone', 
     revert: 'invalid', 
     cursor: 'move' 
    }); 

내 문제는 내가 함께 일하도록 할 수 없다는 것입니다. 왼쪽 목록은 드래그 가능하며 오른쪽 정렬도 가능하지만 연결이 작동하지 않습니다. 불타고있는 드롭 이벤트가 없습니다 ... 일반적으로 가능합니까? 누군가이 아이디어를 얻기 위해 아이디어가 있다면?

Answer 1

sortable 플러그인은 드래그 한 항목을 받으면 삭제해야하는 실제 데이터 항목을 가리 키도록 첨부 된 메타 데이터가 있어야합니다. 메타 데이터는 KO의 ko.utils.domData.set 기능을 통해 첨부됩니다. 항목이 정렬 삭제하기 전에

ko.utils.domData.set(element, key, value);

그래서,이 메타 데이터를 첨부 할 것입니다 : 그것은 같은이라고합니다. 같은 뭔가 :

드래그 항목이 삭제됩니다

$(".drag-item").draggable({ 
    connectToSortable: ".container", 
    helper: "clone", 
    start: function(event, ui) { 
     ko.utils.domData.set(event.target, "ko_dragItem", true); 
    } 
}); 

, 플러그인 실제로 정렬의 observableArray에 배치 복사본을 생성하는 두 가지 방법을 시도합니다. 먼저 항목에서 clone 함수를 찾습니다. 둘째, 정렬 가능한 바인딩에서 구성된 dragged 함수를 실행하고 반환 값을 항목으로 사용합니다. 그래서 http://jsfiddle.net/rniemeyer/aewLbnrm/

, 당신은 결정 할 것 : 여기

this.handleDraggedItem = function(item, event, ui) { 
    return new Task(ui.item.text()); 
}; 

가 jsFiddle의 샘플은 다음과 같습니다

<div class="container" data-bind="sortable: { data: tasks, dragged: handleDraggedItem }"> 
    <div class="item" data-bind="text: name"> 
    </div> 
</div> 

와 handleDraggedItem 같은 : 같은

그래서, 바인딩 정렬이 보일 수 있습니다 어떻게/어디서 당신의 아이템을 만들고 싶습니까? 당신은 draggable start 방법으로 그것을 할 수 있고 단순히 dragged 함수에서 항목을 반환하거나 dragged 함수 내 샘플에서 좋아해요. 모두가 의미가 있기를 바랍니다!