는

Question

여기

내 바이올린입니다 Rubaxa의 Sortable.js에서 복제 된 용기에 삭제할 수 없습니다 : SORTABLE-DEMO

"위젯"나는 클론을 끌어와 ID = "B"가 "그룹 1"수있는 곳에서입니다 내가 떨어질 수있는 곳 클론을 안으로. "+"를 클릭하고 id = "B"속성을 첨부하여이 클론에 넣을 수있는 클론을 만듭니다. 그러나 떨어 뜨리는 것은 불가능합니다. (중복 ID로 인한 것일 수도 있음)

다른 해결책이 있습니까?

도움을 주시면 감사하겠습니다. 고마워 ..

new Sortable(document.getElementById('B'), { 
    group: { 
    name: 'letters', 
    put: true 
    }, 
    onAdd: function(event) { 
    console.log(event.item); 
    } 
}); 


$('#addRow').on('click', function(e) { 
    var len = $('.child-border').length; 
    $('.parent-border').clone().attr('id','B') 
    .toggleClass('parent-border child-border').hide() 
    .appendTo('#container').slideDown('slow'); 
}); 

Answer 1

나는 RubaXa를 사용한 적이 없기 때문에 그것을 통해 피델 쓴해야했다.

예 : https://jsfiddle.net/Twisty/jsnvxsev/1/

HTML

<ul id="widgets-1"> 
    <h5>Widgets</h5> 
    <br> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
    <li>D</li> 
</ul> 
<br> 
<ul id="widgets-2"> 
    <h5>Group 1</h5> 
    <br> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
    <li>D</li> 
</ul> 
<br> 
<ul class="parent-border"> 
    <div class="form-group"> 
    <div class="col-sm-12"> 
     <button type="button" id="deleteRow" class="btn btn-danger btn-circle btn-lg pull-right"><i class="glyphicon glyphicon glyphicon-trash"></i></button> 
    </div> 
    </div> 
</ul> 
<div id="container"></div> 
<div class="form-group"> 
    <div class="col-sm-12"> 
    <button type="button" id="addRow" class="btn btn-success btn-circle btn-lg center-block"><i class="glyphicon glyphicon-plus"></i></button> 
    </div> 
</div> 

자바 스크립트

new Sortable($('#widgets-1')[0], { 
    group: { 
    name: 'letters', 
    put: false, 
    pull: 'clone', 
    }, 
    setData: function(dataTransfer, element) { 
    dataTransfer.setData('text', element.textContent); 
    }, 
    sort: false 
}); 
new Sortable($('#widgets-2')[0], { 
    group: { 
    name: 'letters', 
    put: true 
    }, 
    onAdd: function(event) { 
    console.log(event.item); 
    } 
}); 

$('#addRow').on('click', function(e) { 
    var len = $('.child-border').length; 
    var widgCount = $("[id|='widgets']").length; 
    $('.parent-border').clone().attr('id', 'widgets-' + ++widgCount) 
    .toggleClass('parent-border child-border').hide() 
    .appendTo('#container').slideDown('slow'); 
    new Sortable($("#widgets-" + widgCount)[0], { 
    group: { 
     name: 'letters', 
     put: true 
    }, 
    onAdd: function(event) { 
     console.log(event.item); 
    } 
    }); 
}); 

$('#container').on('click', '[id=deleteRow]', function(e) { 
    $(this).closest('.child-border, .parent-border').remove(); 
}); 

복제 구조를 추가 한 후, 나는 당신이 정렬 구조를 초기화하는 데 필요한 의심. 이것은 트릭을 할 것으로 보인다.