div가 떨어졌을 때 복제하는 방법과 끌기가 시작되지 않을 때

Question

jQuery UI를 사용하여 삭제할 때만 특정 div의 복제본을 만들고 싶습니다. 드래그를 시작하고 다시 드래그 할 준비가되면 같은 지점에이 div가 복제되어야합니다.

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

이 내 JS입니다 :

난 당신이 복제 한 후 드래그 할 수있는 요소를 다시 초기화 할 필요가 있다고 생각

$(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'); 
    } 
    }); 
}); 

Answer 1

, 내가 JS 기능 drop는 아래의 코드를 참조 변경되었습니다.

$("#droppable-box").droppable({ 
    drop: function(event, ui) { 
     var clone = ui.helper.clone(); 
     clone.appendTo('#droppable-box'); 
     clone.draggable({ 
     helper: "clone" 
     }); 
    } 
    }); 

$(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.appendTo('#droppable-box'); 
 
     clone.draggable({ 
 
     helper: "clone" 
 
     }); 
 
    } 
 
    }); 
 
});

.box { 
 
    height: 30px; 
 
    width: 50px; 
 
    border: 1px solid black; 
 
    background: green; 
 
} 
 

 
#droppable-box { 
 
    height: 400px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    background: lightgray; 
 
} 
 

 
.container { 
 
    border: 1px solid black; 
 
    float: left; 
 
    margin: 0 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> 
 

 
<span>Drag green boxes onto gray dropzone</span> 
 

 
<div class="container"> 
 
    <div class="box" id="dragrabble-one"></div> 
 
    <br /> 
 
    <div class="box" id="dragrabble-two"></div> 
 
    <br /> 
 
    <div class="box" id="dragrabble-three"></div> 
 
    <br /> 
 
    <div class="box" id="dragrabble-four"></div> 
 
    <br /> 
 
    <div class="box" id="dragrabble-five"></div> 
 
    <br /> 
 
    <div class="box" id="dragrabble-six"></div> 
 
    <br /> 
 
    <div class="box" id="dragrabble-seven"></div> 
 
    <br /> 
 
    <div class="box" id="dragrabble-eight"></div> 
 
    <br /> 
 
</div> 
 

 
<div class="container"> 
 
    <div id="droppable-box">Drop Zone</div> 
 
</div>