jQuery UI sortable : 복제본을 이동하지만 원본을 유지합니다.

지금 당장 요소 열을 가져오고 드래그 한 부분, 복제 한 부분이 있지만 놓으면 원본도 제거됩니다. jQuery UI sortable : 복제본을 이동하지만 원본을 유지합니다.

$(".column").sortable({ 
     helper: 'clone', 
     connectWith: ".column", 
     connectWith: ".grid", 
     start: function(e, ui){ 
      ui.placeholder.height(ui.item.height()); 
      $(".column").find('.portlet:hidden').show() 
      console.log('started') 
     }, 
     stop: function(event, ui) { 
      $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body'); 
     } 
    });

어떻게 원본을 유지할 수있는 자사의 원하는 위치 및 복제 이동이 (컬럼에 다시 추가없이)?

출처

2013-01-07 Anonymous

'clone()'을 사용할 때 유효하지 않은 HTML (중복 ID)을 생성하는 것에주의하십시오. – jbabey

[이 질문] (http://stackoverflow.com/questions/6940390/how-do-i-duplicate-item-when-using-jquery-sortable)은 매우 유사하며 훌륭한 대답을 가지고 있습니다. 승인 된 것이 아닌 하나의 것으로 표기 됨. – Coderer

stop 이벤트 처리기 안에 $(this).sortable('cancel')을 사용하면 항목을 원래의 목록/위치로 되돌릴 수 있습니다. http://api.jqueryui.com/sortable/#method-cancel

$(".column").sortable({ 
     helper: 'clone', 
     connectWith: ".column", 
     connectWith: ".grid", 
     start: function(e, ui){ 
      ui.placeholder.height(ui.item.height()); 
      $(".column").find('.portlet:hidden').show() 
      console.log('started') 
     }, 
     stop: function(event, ui) { 
      $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body'); 
      $(this).sortable('cancel'); 
     } 
    });

UPDATE :

stop: function(event, ui) { var toListID = ui.item.parent().attr('id'); var idx = $('#' + toListID).children().index($(ui.item[0])); if(idx== -1)return; var elm = $(ui.item[0]).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone'); $('#' + toListID).children(':eq('+idx+')').after(elm); $(this).sortable('cancel'); }

에 대한 fiddle를 참조하십시오

다음 좋아한다, 무언가 을 항목이 삭제 된 위치에서 두 번째 목록에 요소를 추가하려면 전체 데모

출처

2013-01-07 16:35:22 adamb

이렇게하면 복제 된 요소가 취소 된 것처럼 보입니다. 내가 떨어 뜨리면 아무것도 놓기 위치에 들어 가지 않습니다. –

@delboud Works for me : http://jsfiddle.net/adamb/tZSN7/11/ – adamb

지금 내가 생각하는 것을보고, 추가하기 전에 그 해결책을 시도했지만 실제 드롭 위치에 있어야합니다. . 바닥에 추가되는 것이 아닙니다. 추가를 피하는 방법에 대한 아이디어가 있습니까? –

이것은 다른 proach :

sort: function(e, ui) { 
    $(ui.placeholder).html($(ui.item).html()); 
    $(ui.placeholder).addClass($(ui.item).attr('class')); 
},

출처

2015-06-02 21:09:37

jQuery UI sortable : 복제본을 이동하지만 원본을 유지합니다.

답변

관련 문제