드래그 가능한 복제본을 만들어서 드롭 가능에 놓으면 다시 드래그 할 수 없습니다.
드래그 가능한 복제본을 만들어서 드롭 가능에 놓으면 다시 드래그 할 수 없습니다. 어떻게하나요? 두 번째 .append
로, droppable에 클론을 추가하는 방법 만 알아낼 수 있습니다 . 그러나 드롭 위치가 아닌 기존 요소 뒤의 왼쪽 상단 모서리에 스냅됩니다.
$(document).ready(function() {
$("#container").droppable({
drop: function(event, ui) {
$(this).append($(ui.draggable).clone());
}
});
$(".product").draggable({
helper: 'clone'
});
});
</script>
<div id="container">
</div>
<div id="products">
<img id="productid_1" src="images/pic1.jpg" class="product" alt="" title="" />
<img id="productid_2" src="images/pic2.jpg" class="product" alt="" title="" />
<img id="productid_3" src="images/pic3.jpg" class="product" alt="" title="" />
</div>
이를 수행하는 한 가지 방법은 다음과 같습니다.
$(document).ready(function() {
$("#container").droppable({
accept: '.product',
drop: function(event, ui) {
$(this).append($("ui.draggable").clone());
$("#container .product").addClass("item");
$(".item").removeClass("ui-draggable product");
$(".item").draggable({
containment: 'parent',
grid: [150,150]
});
}
});
$(".product").draggable({
helper: 'clone'
});
});
그러나 그것이 멋지고 깨끗한 코딩인지 확실하지 않습니다.
Google을 통해이 질문을 찾았습니다. 추가 할 때 'ui.draggable'을 'ui.helper'로 변경할 때까지 위치가 컨테이너에 스냅되지 않도록 할 수 없습니다.
$(this).append($(ui.helper).clone());
떨어 뜨린 항목의 위치를 변경하려는 경우. 여기를보세요.
실제로 다음과 같은 코드를 사용해야했습니다.
$(item).css('position', 'absolute');
$(item).css('top', ui.position.top - $(this).position().top);
$(item).css('left', ui.position.left - $(this).position().left);
그것을하기 위하여.
Here is my solution, it allows for dragging and dropping a clone, and then replacing it after as needed by another drag and drop. It also has a callback function parameter which passes back the dropped div object so that you can do something with the jquery selected div once dropped.
refreshDragDrop = function(dragClassName,dropDivId, callback) {
$( "." + dragClassName ).draggable({
connectToSortable: "#" + dropDivId,
helper: "clone",
revert: "invalid"
});
$("#" + dropDivId).droppable({
accept: '.' + dragClassName,
drop: function (event, ui) {
var $this = $(this),
maxItemsCount = 1;
if ($this.children('div').length == maxItemsCount ){
//too many item,just replace
$(this).html($(ui.draggable).clone());
//ui.sender.draggable('cancel');
} else {
$(this).append($(ui.draggable).clone());
}
if (typeof callback == "function") callback($this.children('div'));
}
});
}
ReferenceURL : https://stackoverflow.com/questions/867469/when-i-make-a-draggable-clone-and-drop-it-in-a-droppable-i-cannot-drag-it-again
'Programing' 카테고리의 다른 글
'UserControl'유형은 직접 콘텐츠를 지원하지 않습니다. (0) | 2021.01.09 |
---|---|
단수 또는 복수 데이터베이스 테이블 이름? (0) | 2021.01.09 |
비밀번호 로그인에 솔트를 어떻게 구현합니까? (0) | 2021.01.08 |
브라우저의 User-Agent 문자열의 표준 형식은 무엇입니까? (0) | 2021.01.08 |
위와 아래에 알 수없는 높이 div가있는 CSS를 사용하여 div를 나머지 높이로 설정 (0) | 2021.01.08 |