jquery로 드래그 앤 드롭, 드래그 앤 드롭 div

버튼을 특정 div 요소로 드래그 할 수있는 jQuery로 솔루션을 구현하고 싶습니다. 해당 div로 떨어지면 html을 사용자 정의해야합니다.jquery로 드래그 앤 드롭, 드래그 앤 드롭 div

jsfiddle에있는 예가 하나 있지만 jsfiddle에 연결하는 것이 불행합니다. 나는 여기에 모든 코드를 붙여 오전 :

HTML

<ul id="left-pane"> 
    <li><img src="https://www.google.com/images/srpr/logo3w.png" /></li> 
    <li><img src="https://www.google.com/images/srpr/logo3w.png" /></li> 
    <li><img src="https://www.google.com/images/srpr/logo3w.png" /></li> 
</ul> 

<ul id="right-pane"> 
</ul>

CSS

#left-pane 
{ 
    border: 1px solid black; 
    min-width: 100px; 
    min-height: 100px; 
} 

#right-pane 
{ 
    border: 1px solid black; 
    min-width: 100px; 
    min-height: 100px; 
}

자바 스크립트/jQuery를이

$("#left-pane li").draggable({ 
    containment: '#gbox', 
    cursor: 'move', 
    helper: 'clone', 
    scroll: false, 
    connectToSortable: '#right-pane', 
    appendTo: '#right-pane', 
    start: function() {}, 
    stop: function (event, ui) {} 
}).mousedown(function() {}); 

$("#right-pane").sortable({ 
    sort: function() {}, 
    placeholder: 'ui-state-highlight', 
    receive: function() {}, 
    update: function (event, ui) {} 
}); 

$("#right-pane li").live('dblclick', function() { 
    $(this).remove(); 
}) 

$("#right-pane").droppable({ 
    accept: "#left-pane li", 
    accept: ":not(.ui-sortable-helper)", 
    drop: function (event, ui) { 
     if ($(ui.draggable).find('.single-item').length == 0) 
     { 
      $(ui.draggable).append("<div class='single-item'><input type='text' class='item-title' /><br /><textarea class='item-text'></textarea></div>"); 
     } 
    } 
}); 

$("#left-pane").droppable({ 
    accept: "#right-pane li", 
    drop: function (event, ui) {} 
}); 

$("ul, li").disableSelection();

나는 위의 비슷한 싶어하지만 난을 변경하려면 이미지를 특정 버튼으로 UI 엘리먼트로 바꾸면 일반 div로 바꿀 수 있습니까?

누구나이 피들을 가지고 노는 간단한 드래그 앤 드롭 솔루션을 제공 할 수 있습니까?

미리 감사드립니다.

출처

2013-06-20 SachinKRaj

당신이 아니라 당신이 코드도 – Pete

@pete을 게시로 바이올린 연결할 수 있습니다 고마워. 방금 해결책을 찾았으며 답과 같은 것을 추가했습니다. 다른 코더들에게도 도움이되기를 바랍니다. – SachinKRaj

나는 위의 코드를 사용하여 직접 해결책을 찾았다 고 생각합니다. 단추가 이미 이벤트를 클릭했기 때문에 단추를 잘못 드래그했습니다. 단추를 끌려고 할 때 끌기 이벤트가 작동하지 않습니다. 방금 div 요소를 추가해 보았습니다.이 요소는 버튼 (CSS 스타일)처럼 보이고 원하는 방식으로 작동했습니다.

내가 변경해야 할 것은 각 HTML 코드에 : 여기

<ul id="left-pane"> 
    <li><div align="center" style="width:100px;border:3px solid #ddd; padding:5px;cursor:move;background:#eee;">Drag Me</div> 
</ul> 

<ul id="right-pane"> 
</ul>

내가 찾던 최종 솔루션입니다 : http://jsfiddle.net/Y7RmR/77/

출처

2013-06-20 16:25:12 SachinKRaj

jquery로 드래그 앤 드롭, 드래그 앤 드롭 div

답변

관련 문제