jQuery - 드롭했을 때만 복제

Question

특정 div의 "복제본"을 어떻게 삭제할 수 있습니까? 드래그를 시작하고 다시 드래그 할 준비가되면이 복제본이 같은 위치에 있어야합니다.

예를 들어이 fiddle의 녹색 요소는 초기 위치에서 복제 할 수 있습니다. 사전에

$(function() { 
    $("#dragrabble-one").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-two").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-three").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-four").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-five").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-six").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-seven").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-eight").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-one").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-two").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-three").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-four").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-five").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-six").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-seven").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-eight").draggable({ 
    revert: "invalid" 
    }); 
    $("#droppable-box").droppable({ 
    drop: function(event, ui) { 
     var clone = ui.helper.clone(); 
     clone.draggable(); 
     clone.appendTo('#droppable-box'); 
    } 
    }); 
}); 

감사 :

이 내 JS이다.

Answer 1

A 사용자가 요소를 드래그하기 시작할 때 불투명도가 0 인 복제 된 요소를 숨기고 끌기가 중지되었을 때 불투명도를 다시 1로 설정할 수 있습니다.

$("#dragrabble-one").draggable({ 

    helper: 'clone', 
    start: function (event, ui){ 
     $(this).css('opacity','0'); 
    }, 
    stop: function (event, ui){ 
     $(this).css('opacity','1'); 
    } 

}); 

이 정보가 도움이 되었기를 바랍니다. :)