다중 끌어서 놓기 버튼과 HTML5가있는 대상 DIV

Question

지도 나 그래프의 형태로 사용 가능한 웹 서비스를 나타내는 두 개의 단추가 있습니다. 사용자는 자신의 필요에 맞는 GUI의 컨텍스트를 스스로 구성하기 위해 다양한 크기의 다양한 DIV에있는 버튼을 화면에서 드래그 할 수 있습니다.

HTML5 및 jQuery의 드래그 앤 드롭 기능에 익숙하지 않습니다. 단일 버튼과 단일 DIV에서 잘 작동하는 예제를 설정했습니다. 그러나 여러 개의 버튼과 여러 개의 DIV로 작업하면서 내 작업 흐름이 올바른지 궁금합니다.

나는 Fiddle here을 설정했습니다. 첫 번째 버튼은 첫 번째 DIV로 드래그 할 수 있으며 이미지 (단지 자리 표시 자)가 나타납니다. 다른 사람들은 아직 작동하지 않습니다.

DIV와 버튼이 ID로 호출되기 때문에 버튼에 4 개의 ID가 있고 DIV에 4 개의 ID가있을 수 있습니다. 그러나 그것은 다른 ID가 하드 코딩 된 동일한 자바 스크립트 코드를 네 번 작성해야한다는 의미일까요? 이것에 대한 더 유연한 해결책이있는 것 같군, 안 그래? 특히, 대상 DIV가 유연하게 유지되어야하기 때문에 ...

일단 끌면 버튼이 사라지는 것을 피할 수있는 방법이 궁금합니다. 차라리 회색으로 만들려고합니다.

어떤 힌트를 주셔서 감사합니다!

GUI는 다음과 같을 것이다 :

function onDragOver(e) { 
     e.preventDefault(); 
     e.target.className = "over-me"; 
    } 

    function onDragLeave(e) { 
     e.target.className = "static"; 
    } 

    function onDragStart(e) { 
     e.target.innerHTML = "<h4>You are Dragging me</h4>"; 
     document.getElementById('dropzone1').className = 'drop-into-me' 
    } 

    function onDragEnd(e) { 
     e.target.innerHTML = "<h4>Drag Me into the Box :)</h4>"; 
     document.getElementById('dropzone1').className = 'static' 
     if (e.target.parentElement.id === "dropzone1") { 
     e.target.innerHTML = "<img src='http://ede.grid.unep.ch/images/logo_geo.gif'>"; 
     } 
    } 

    function onDrop(e) { 
     e.preventDefault(); 
     var draggableDiv = document.getElementById("a-draggable-div"); 
     draggableDiv.setAttribute("draggable", "false"); 
     e.target.appendChild(draggableDiv); 
    } 

CSS의 경우 : 자바 스크립트의 경우

<div id="a-draggable-div" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left"> 
     <h4 style="float: left">Map :: Precipitation</h4> 
    </div> 
    <div style="float: left"> 
     <h4 style="float: left">Map :: Temperature</h4> 
    </div> 
    <div style="float: left"> 
     <h4 style="float: left">Graph :: Precipitation</h4> 
    </div> 
    <div style=""> 
     <h4 style="float: left">Graph :: Temperature</h4> 
    </div> 

    <br clear="all" /> 

    <div id="dropzone1" class="static" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div> 
    <div id="dropzone2" class="static" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div> 
    <div id="dropzone3" class="static" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div> 

: 버튼에 대한

을,이이

#dropzone1, #dropzone2, #dropzone3 { 
     width: 350px; 
     height: 70px; 
     padding: 10px; 
    } 

    .static { 
     border: 1px solid #aaaaaa; 
    } 

    .drop-into-me { 
     border: 1px dotted #aaaaaa; 
    } 

    .over-me { 
     background-color: yellow; 
     border: 1px dotted #aaaaaa; 
    } 

    h4 { 
     background-color: #44c767; 
     -moz-border-radius: 4px; 
     -webkit-border-radius: 4px; 
     border-radius: 4px; 
     border: 1px solid #18ab29; 
     display: inline-block; 
     cursor: pointer; 
     color: #ffffff; 
     font-family: Verdana; 
     font-size: 15px; 
     padding: 7px 31px; 
     text-decoration: none; 
     text-shadow: 0px 1px 6px #0e2b0a; 
     margin-right: 20px 
    } 

Answer 1

여기

당신이 드롭하는 버튼의 많은 수와 div에의 대응을 가질 수 id을 사용하지 않아도되는 솔루션입니다.

당신은 그냥 보여주기 위해 버튼을 삭제합니다 div의에 ids를 봤나 어떤 div가 드롭 되었습니까?

여기는 업데이트 된 Fiddle입니다.

 

 
//just to know which button is being dragged we will use this variable 
 
var draggingDiv; 
 
function onDragOver(e) { 
 
    e.preventDefault(); 
 
    e.target.classList.add("over-me"); 
 
} 
 

 
function onDragLeave(e) { 
 
    e.target.classList.add("static"); 
 
    e.target.classList.remove("over-me"); 
 
} 
 

 
function onDragStart(e) { 
 
\t draggingDiv=e.target; 
 
    e.target.innerHTML = "<h4>You are Dragging me</h4>"; 
 
} 
 

 
function onDragEnd(e) { 
 
\t 
 
    e.target.innerHTML = "<h4>Drag Me into the Box :)</h4>"; 
 
    e.target.parentElement.classList.add("static"); 
 
    draggingDiv.innerHTML="<h4>Dragged once Can't drag me now:)</h4>"; 
 
// e.target.innerHTML = "<h4>You Dropped Me In "+e.target.parentElement.id+"</h4>"; 
 
} 
 

 
function onDrop(e) { 
 
    e.preventDefault(); 
 
    e.target.classList.remove("over-me"); 
 
    //uncommment the below line if want that the button should not be draggable once it has been dropped in a div already 
 
    //draggingDiv.draggable=false; 
 
    //e.target.appendChild(draggingDiv);/commented as this will take the button to the div but we want it to at the original pposition 
 
    e.target.innerHTML="<span>Please Change My innerHTML or call some function that loads data That handles the graph/map creation in this Div</span>"; 
 
    
 
}

.dropzone { 
 
    width: 350px; 
 
    height: 70px; 
 
    padding: 10px; 
 
} 
 

 
.static { 
 
    border: 1px solid #aaaaaa; 
 
} 
 

 
.drop-into-me { 
 
    border: 1px dotted #aaaaaa; 
 
} 
 

 
.over-me { 
 
    background-color: yellow; 
 
    border: 1px dotted #aaaaaa; 
 
} 
 

 
h4 { 
 
    background-color: #44c767; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    border-radius: 4px; 
 
    border: 1px solid #18ab29; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    color: #ffffff; 
 
    font-family: Verdana; 
 
    font-size: 15px; 
 
    padding: 7px 31px; 
 
    text-decoration: none; 
 
    text-shadow: 0px 1px 6px #0e2b0a; 
 
    margin-right: 20px 
 
}

<div draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left"> 
 
    <h4 style="float: left">Map :: Precipitation</h4> 
 
</div> 
 
<div style="float: left" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)"> 
 
    <h4 style="float: left">Map :: Temperature</h4> 
 
</div> 
 
<div style="float: left" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)"> 
 
    <h4 style="float: left">Graph :: Precipitation</h4> 
 
</div> 
 
<div style="float: left" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)"> 
 
    <h4 style="float: left">Graph :: Temperature</h4> 
 
</div> 
 

 
<br clear="all" /> 
 

 
<div id="dropzone1" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div> 
 
<div id="dropzone2" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div> 
 
<div id="dropzone3" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div> 
 
<div id="dropzone4" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>

는 https://jqueryui.com/draggable/#sortable이 도움이 :) 어쩌면