javascript - 使用 HTML5 的多个拖放按钮和目标 DIV

Question

我有几个按钮，它们以 map 或图表的形式代表可用的网络服务。用户将能够在屏幕上拖动不同大小的不同 DIV 中的按钮，以便在 GUI 上为自己构建适合他需要的上下文。

我不是很熟悉 HTML5 和 jQuery 的拖放功能。我已经设置了一个示例，它适用于单个按钮和单个 DIV。但是在使用多个按钮和多个 DIV 时，我想知道我的工作流程是否正确。

我已经设置了一个 Fiddle here .可以将第一个按钮拖到第一个 DIV，然后会出现一个图像(只是一个占位符)。其他的还没有工作。

由于 DIV 和按钮是通过 ID 调用的，所以我现在可以为按钮使用四个不同的 ID，为 DIV 使用四个不同的 ID。但这是否意味着我必须编写四次相同的 javascript 代码，并将不同的 ID 硬编码到其中？我想对此有更灵活的解决方案，不是吗？特别是，由于目标 DIV 必须保持灵活...

我也想知道如何避免按钮在被拖动后消失。我宁愿让它变成灰色。

感谢任何提示!

GUI 看起来像这样:

对于按钮，我有这个:

    <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>

对于javascript部分:

    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:

    #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

这是一个不需要使用 id 的解决方案，您可以放置​​任意数量的按钮和相应数量的 div。

已将 ids 赋予 div，您将在其中放置按钮，只是为了显示按钮已放置在哪个 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) {
	draggingDiv=e.target;
  e.target.innerHTML = "<h4>You are Dragging me</h4>";
}

function onDragEnd(e) {
	
  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>

希望对您有所帮助:)