Javascript 多重拖动&；使用HTML5的下拉按钮和目标div

我有几个按钮，它们代表以地图或图形形式提供的Web服务。用户可以在屏幕上拖动不同大小的不同div中的按钮，以便在GUI上为自己构建一个符合其需要的上下文

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

我已经建立了一个新的组织。可以将第一个按钮拖动到第一个DIV，并显示一个图像（只是一个占位符）。其他人还没开始工作

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

我也在想，一旦按钮被拖动，我怎么能避免它消失。我宁愿把它变成灰色左右

谢谢你的提示

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>

---

这是一个不需要使用

id

的解决方案，您可以有尽可能多的按钮和相应数量的div

已将

id

提供给div，您将在其中删除按钮，只是为了显示按钮已在哪个div中删除

以下是更新的

//为了知道哪个按钮被拖动，我们将使用这个变量
var draggingDiv；
函数onDragOver（e）{
e、 预防默认值（）；
e、 target.classList.add（“超过我”）；
}
功能（e）{
e、 target.classList.add（“静态”）；
e、 target.classList.remove（“超过我”）；
}
启动功能（e）{
draggingDiv=e.目标；
e、 target.innerHTML=“您正在拖动我”；
}
函数onDragEnd（e）{
e、 target.innerHTML=“将我拖到框中：）”；
e、 target.parentElement.classList.add（“static”）；
draggingDiv.innerHTML=“Drawed once现在不能拖动我：）”；
//e.target.innerHTML=“您将我放入了“+e.target.parentElement.id+”；
}
函数onDrop（e）{
e、 预防默认值（）；
e、 target.classList.remove（“超过我”）；
//如果希望在按钮已放入div后不可拖动，请取消对下面一行的注释
//draggingDiv.draggable=false；
//e、 target.appendChild（draggingDiv）；/注释，因为这将使按钮指向div，但我们希望它位于原始位置
e、 target.innerHTML=“请更改我的innerHTML或调用一些加载数据的函数来处理此Div中的图形/地图创建”；
}

.dropzone{
宽度：350px；
高度：70像素；
填充：10px；
}
.静态{
边框：1px实心#AAAAA；
}
.来找我{
边框：1个点#AAAAA；
}
.在我身上{
背景颜色：黄色；
边框：1个点#AAAAA；
}
h4{
背景色：#44c767；
-moz边界半径：4px；
-webkit边界半径：4px；
边界半径：4px；
边框：1px实心#18ab29；
显示：内联块；
光标：指针；
颜色：#ffffff；
字体系列：Verdana；
字体大小：15px；
填充：7px 31px；
文字装饰：无；
文本阴影：0px 1px 6px#0e2b0a；
右边距：20px
}

地图：降水量
地图：温度
图：降水量
图表：温度

这是一个解决方案，您无需使用

id

您可以有任意数量的按钮和相应数量的div来插入

已将

id

提供给div，您将在其中删除按钮，只是为了显示按钮已在哪个div中删除

以下是更新的

//为了知道哪个按钮被拖动，我们将使用这个变量
var draggingDiv；
函数onDragOver（e）{
e、 预防默认值（）；
e、 target.classList.add（“超过我”）；
}
功能（e）{
e、 target.classList.add（“静态”）；
e、 target.classList.remove（“超过我”）；
}
启动功能（e）{
draggingDiv=e.目标；
e、 target.innerHTML=“您正在拖动我”；
}
函数onDragEnd（e）{
e、 target.innerHTML=“将我拖到框中：）”；
e、 target.parentElement.classList.add（“static”）；
draggingDiv.innerHTML=“Drawed once现在不能拖动我：）”；
//e.target.innerHTML=“您将我放入了“+e.target.parentElement.id+”；
}
函数onDrop（e）{
e、 预防默认值（）；
e、 target.classList.remove（“超过我”）；
//如果希望在按钮已放入div后不可拖动，请取消对下面一行的注释
//draggingDiv.draggable=false；
//e、 target.appendChild（draggingDiv）；/注释，因为这将使按钮指向div，但我们希望它位于原始位置
e、 target.innerHTML=“请更改我的innerHTML或调用一些加载数据的函数来处理此Div中的图形/地图创建”；
}

.dropzone{
宽度：350px；
高度：70像素；
填充：10px；
}
.静态{
边框：1px实心#AAAAA；
}
.来找我{
边框：1个点#AAAAA；
}
.在我身上{
背景颜色：黄色；
边框：1个点#AAAAA；
}
h4{
背景色：#44c767；
-moz边界半径：4px；
-webkit边界半径：4px；
边界半径：4px；
边框：1px实心#18ab29；
显示：内联块；
光标：指针；
颜色：#ffffff；
字体系列：Verdana；
字体大小：15px；
填充：7px 31px；
文字装饰：无；
文本阴影：0px 1px 6px#0e2b0a；
右边距：20px
}

地图：降水量
地图：温度
图：降水量
图表：温度

也许您可以查看jQueryUI（可拖动和可排序模块），也许您可以查看jQueryUI（可拖动和可排序模块），这确实很有帮助。伟大的非常感谢

    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);
    }

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