jquery ui를 사용하여 드래그 가능한 div 복제

나는이 문제에있어 초기 단계이기 때문에 큰 문제가 있습니다.jquery ui를 사용하여 드래그 가능한 div 복제

jquery를 사용하여 div를 드래그 앤 드롭했지만 드래그를 시작하면 div가 필요합니다.

나는이 코드를 시도하지만 뭔가 그와 함께 잘못 :

google.maps.event.addListener(map, 'tilesloaded', function(evt) { 
$(function() { 
    $(".draggable").resizable(); 
    $(".draggable").draggable({revert: 'invalid', helper: 'clone', snap: "#drop_here td", opacity: 0.7}); 
    $("#drop_here td").droppable({ 
     accept: '.draggable', 
     drop: function(event, ui) { 
     $(this) 
      .find("p") 
      .html("Dropped!"); 
     } 
    }); 
    }); });

데모 :이 코드가 작동하지 않는 이유 http://jsbin.com/erofot/17

Doeas 아무도 알아?

출처

2013-07-02 Mark West

무슨 일입니까? div가 전혀 끌리지 않습니까? 드래그하지만 복제하지는 않습니까? 자세한 내용을 알려주십시오. "뭔가 잘못되었습니다."문제를 해결하는 것이 불가능합니다. – Jack

예 끌기 만 복제하지 않음 –

여기에서 원하는 작업을 볼 수 있습니다. http://jsbin.com/erofot/17이므로 div는 테이블로 크기 조정 가능해야하며 크기를 조정할 수 있어야합니다. offcource 테이블 행 높이를 변경하지 마십시오 –

당신은 드래그되는 객체의 복제를 만들 필요가

, 수정을?

google.maps.event.addListener(map, 'tilesloaded', function(evt) { 
    $(function() { 
    $(".draggable").resizable(); 
    $(".draggable").draggable({ helper: 'clone', snap: "#drop_here td", opacity: 0.7}); 
    $(".draggable").draggable({ 
     start: function() { 
      var drgClone = $(this).clone(true); 
     } 
    }) 
    $("#drop_here td").droppable({ 
     accept: '.draggable', 
     drop: function(event, ui) { 
     $(this).append($(ui.draggable).clone()); 
     } 
    }); 
    }); 
});

출처

2013-07-02 03:58:29 DevlshOne

잘 작동하지 않습니다. 1. 드래그 할 때 테이블 변경 높이 2. div를 드래그 한 후 크기를 조절할 수 없습니다. 3. div는 원하는대로 위치에 머물러 있지 않습니다. 왼쪽 : 0px ... –

여기에서 원하는 작업을 볼 수 있습니다. http : //jsbin.com/erofot/17이므로 div는 테이블로 드래그 가능해야하며 테이블 행 높이를 변경하지 않기 위해 크기를 조정할 수 있으며 오프 소스로 설정해야합니다. –

그래서 여기에서 같이 작업해야합니다. http://jsbin.com/erofot/17 그러나 복제와 함께 –

드래그 할 때 헬퍼 : '복제'옵션을 사용하면 드래그하는 동안 div의 복제본 만 생성됩니다.

droppable 위젯의 드롭 이벤트 중에 복제를 추가하십시오. (참고 : 나는 또한 드래그에서 되돌리기 옵션을 제거 필요하지 않을 것 같은)

google.maps.event.addListener(map, 'tilesloaded', function(evt) { 
    $(function() { 
    $(".draggable").resizable(); 
    $(".draggable").draggable({ helper: 'clone', snap: "#drop_here td", opacity: 0.7}); 
    $("#drop_here td").droppable({ 
     accept: '.draggable', 
     drop: function(event, ui) { 
     $(this).append($(ui.draggable).clone()); 
     } 
    }); 
    }); 
});

출처

2013-07-02 03:23:16 boniestlawyer

네,하지만 드래그 한 후 div 위치는 왼쪽에 있습니다 : 0px 그리고 나도 머무를 필요가 없습니다. 크기를 조절할 수있는 작업을 드래그 한 후에 수행하십시오 –

여기에서 원하는 작업을 볼 수 있습니다. http://jsbin.com/erofot/17, div는 테이블로 드래그 할 수 있어야하고 크기를 조정할 수 있어야하고 테이블 행 높이를 변경하지 않아도됩니다. 따라서 이처럼 작업해야하지만 복제 만하면됩니다. 그렇게하는 방법? –

그래서 여기처럼 작업해야합니다 : http://jsbin.com/erofot/17 witj cloning –

이 기능을 확장해야합니다. DevlshOne의 답변이 효과적입니다. 하지만 복제 가능한 요소를 드래그 할 수 있어야합니다. "draggable"이 클래스 목록에 포함되어 있지만 현재는 그렇지 않습니다.

및 btw, 스냅인은 무엇입니까?

snap: "#drop_here td",

출처

2014-06-27 15:48:13 musafar006

jquery ui를 사용하여 드래그 가능한 div 복제

답변

관련 문제