多重阻力＆amp;使用HTML5删除按钮和目标DIV

Question

我有几个按钮，代表地图或图表形式的可用网络服务。用户将能够在屏幕上拖动各种尺寸的不同DIV中的按钮，以便在GUI上为自己构成符合其需要的上下文。

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

我已经设置了Fiddle here。可以将第一个按钮拖动到第一个DIV，并显示图像（仅占位符）。其他人还没有工作。

由于ID调用DIV和按钮，我现在可以只为按钮分配四个不同的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>

希望有所帮助：）