javascript - 如何使用javascript停止拖放中的div重叠-6ren

javascript - 如何使用javascript停止拖放中的div重叠

转载作者：太空宇宙更新时间：2023-11-04 10:00:51

我正在制作一个页面，其中左侧有一些可拖动的 div，右侧有 4 个可以拖放这些 div 的框，但是当我将 div 拖放到另一个上时，

类似的事情发生了。我希望它们不重叠，而是自动对齐，就像在 JQuery Sortable 中一样: this: http://jqueryui.com/sortable/#placeholder .

function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);

    }

     function drop(ev) {
       ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }

 <style type="text/css">
.gh{width:96%;height:auto;padding:10px;border:1px solid #aaaaaa;clear: both;margin:10px 10px 10px 10px;overflow:none;
  position: relative;
  display: block;

}

.leftbox{clear: both;
  border:2px solid green;
  float: left;
  width: 100%;
  height: 280px;
  margin: 5px;
  overflow: none;
  overflow:scroll;
  transition: all 0.2s ease;
  z-index: 1000;
  background:white;
  position: absolute;



}
.leftbox2{
  border:2px solid green;
  float: left;
  width: 100%;
  height: 280px;
  margin: 5px;
  overflow: none;
  overflow:scroll;
  transition: all 1s ease;
z-index: 1;
  background:white;
  position: absolute;



}
.rightbox{clear: both;
  border:3px solid red;
  float: left;
  width: 100%;
  height: 280px;
  margin: 5px;
  overflow:scroll;
  transition: all 2s ease;



}
.rightbox2{clear: both;
  border:3px solid red;
  float: left;
  width: 100%;
  height: 280px;
  margin: 5px;
  overflow:scroll;
  transition: all 2s ease;



}

ul{
  list-style-type: none;
}
.go{
min-height:300px;
height: 800px;
width: 100%;
overflow:scroll;

  }
  .btn{
    width: 100%;
  }

  </style>
<!-- language: lang-html -->
<div class="row ">
  <div class="col-md-4 me">
  <div class="big-title">

    <h1 class="col-md-12" style="text-align:center;">
        Wishlist
    </h1>
</div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)" class="go">

      <ul>
      <li >


      <div id="drag0" class="gh col-md-12"  draggable="true" ondragstart="drag(event)" >
      sdfd


     </div>

      </li>          
        <li>
        <div id="drag3" class="gh col-md-12"  draggable="true" ondragstart="drag(event)">
    dasdsa
         </div>
      </li>
      <li>
        <div id="drag4" class="gh col-md-12"  draggable="true" ondragstart="drag(event)">
      <img class="img img-responsive col-md-4" src="images/blog-mini-01.jpg">

      <div class="col-md-8">
      <div class="big-title" style="text-align:center">
<h3>This is a sample tfa jkljankjbfhbfklhabitle</h3>
</div>

<ul class="col-md-12">


         <li class="col-md-6 pull-left"><i class="fa fa-university" aria-hidden="true"> Fees</i></li>
         <li class="col-md-6 pull-right"><i class="fa fa-university" aria-hidden="true"> Rating</i></li>

       <li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> Duration </i></li>
       <li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> University </i></li>

         </ul>
         </div>
       <div>
         <ul>
         <li class="col-md-6">
         <a href="" type="submit" class="btn btn-primary">Go to course>></a>
         </li>
         <li class="col-md-6">

         <a href="" type="submit" class="btn btn-primary ">Remove</a>
</li>         
         </ul>
         </div>
         </div>
      </li>
      <li>
        <div id="drag5" class="gh col-md-12"  draggable="true" ondragstart="drag(event)">
      <img class="img img-responsive col-md-4" src="images/blog-mini-01.jpg">

      <div class="col-md-8">
      <div class="big-title" style="text-align:center">
<h3>This is a sample tfa jkljankjbfhbfklhabitle</h3>
</div>

<ul class="col-md-12">


         <li class="col-md-6 pull-left"><i class="fa fa-university" aria-hidden="true"> Fees</i></li>
         <li class="col-md-6 pull-right"><i class="fa fa-university" aria-hidden="true"> Rating</i></li>

       <li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> Duration </i></li>
       <li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> University </i></li>

         </ul>
         </div>
       <div>
         <ul>
         <li class="col-md-6">
         <a href="" type="submit" class="btn btn-primary">Go to course>></a>
         </li>
         <li class="col-md-6">

         <a href="" type="submit" class="btn btn-primary ">Remove</a>
</li>         
         </ul>
         </div>
         </div>
      </li>
      <li>
        <div id="drag43" class="gh col-md-12"  draggable="true" ondragstart="drag(event)">
      <img class="img img-responsive col-md-4" src="images/blog-mini-01.jpg">

      <div class="col-md-8">
      <div class="big-title" style="text-align:center">
<h3>This is a sample tfa jkljankjbfhbfklhabitle</h3>
</div>

<ul class="col-md-12">


         <li class="col-md-6 pull-left"><i class="fa fa-university" aria-hidden="true"> Fees</i></li>
         <li class="col-md-6 pull-right"><i class="fa fa-university" aria-hidden="true"> Rating</i></li>

       <li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> Duration </i></li>
       <li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> University </i></li>

         </ul>
         </div>
       <div>
         <ul>
         <li class="col-md-6">
         <a href="" type="submit" class="btn btn-primary">Go to course>></a>
         </li>
         <li class="col-md-6">

         <a href="" type="submit" class="btn btn-primary ">Remove</a>
</li>         
         </ul>
         </div>
         </div>
      </li>
      <li>
        <div id="drag41" class="gh col-md-12"  draggable="true" ondragstart="drag(event)">
      <img class="img img-responsive col-md-4" src="images/blog-mini-01.jpg">

      <div class="col-md-8">
      <div class="big-title" style="text-align:center">
<h3>This is a sample tfa jkljankjbfhbfklhabitle</h3>
</div>

<ul class="col-md-12">


         <li class="col-md-6 pull-left"><i class="fa fa-university" aria-hidden="true"> Fees</i></li>
         <li class="col-md-6 pull-right"><i class="fa fa-university" aria-hidden="true"> Rating</i></li>

       <li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> Duration </i></li>
       <li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> University </i></li>

         </ul>
         </div>
       <div>
         <ul>
         <li class="col-md-6">
         <a href="" type="submit" class="btn btn-primary">Go to course>></a>
         </li>
         <li class="col-md-6">

         <a href="" type="submit" class="btn btn-primary ">Remove</a>
</li>         
         </ul>
         </div>
         </div>
      </li><li>
        <div id="drag465" class="gh col-md-12"  draggable="true" ondragstart="drag(event)">
      <img class="img img-responsive col-md-4" src="images/blog-mini-01.jpg">

      <div class="col-md-8">
      <div class="big-title" style="text-align:center">
<h3>This is a sample tfa jkljankjbfhbfklhabitle</h3>
</div>

<ul class="col-md-12">


         <li class="col-md-6 pull-left"><i class="fa fa-university" aria-hidden="true"> Fees</i></li>
         <li class="col-md-6 pull-right"><i class="fa fa-university" aria-hidden="true"> Rating</i></li>

       <li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> Duration </i></li>
       <li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> University </i></li>

         </ul>
         </div>
       <div>
         <ul>
         <li class="col-md-6">
         <a href="" type="submit" class="btn btn-primary">Go to course>></a>
         </li>
         <li class="col-md-6">

         <a href="" type="submit" class="btn btn-primary ">Remove</a>
</li>         
         </ul>
         </div>
         </div>
      </li><li>
        <div id="drag45" class="gh col-md-12"  draggable="true" ondragstart="drag(event)">
      <img class="img img-responsive col-md-4" src="images/blog-mini-01.jpg">

      <div class="col-md-8">
      <div class="big-title" style="text-align:center">
<h3>This is a sample tfa jkljankjbfhbfklhabitle</h3>
</div>

<ul class="col-md-12">


         <li class="col-md-6 pull-left"><i class="fa fa-university" aria-hidden="true"> Fees</i></li>
         <li class="col-md-6 pull-right"><i class="fa fa-university" aria-hidden="true"> Rating</i></li>

       <li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> Duration </i></li>
       <li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> University </i></li>

         </ul>
         </div>
       <div>
         <ul>
         <li class="col-md-6">
         <a href="" type="submit" class="btn btn-primary">Go to course>></a>
         </li>
         <li class="col-md-6">

         <a href="" type="submit" class="btn btn-primary ">Remove</a>
</li>         
         </ul>
         </div>
         </div>
      </li><li>
        <div id="drag47" class="gh col-md-12"  draggable="true" ondragstart="drag(event)">
      <img class="img img-responsive col-md-4" src="images/blog-mini-01.jpg">

      <div class="col-md-8">
      <div class="big-title" style="text-align:center">
<h3>This is a sample tfa jkljankjbfhbfklhabitle</h3>
</div>

<ul class="col-md-12">


         <li class="col-md-6 pull-left"><i class="fa fa-university" aria-hidden="true"> Fees</i></li>
         <li class="col-md-6 pull-right"><i class="fa fa-university" aria-hidden="true"> Rating</i></li>

       <li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> Duration </i></li>
       <li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> University </i></li>

         </ul>
         </div>
       <div>
         <ul>
         <li class="col-md-6">
         <a href="" type="submit" class="btn btn-primary">Go to course>></a>
         </li>
         <li class="col-md-6">

         <a href="" type="submit" class="btn btn-primary ">Remove</a>
</li>         
         </ul>
         </div>
         </div>
      </li><li>
        <div id="drag48" class="gh col-md-12"  draggable="true" ondragstart="drag(event)">
      <img class="img img-responsive col-md-4" src="images/blog-mini-01.jpg">

      <div class="col-md-8">
      <div class="big-title" style="text-align:center">
<h3>This is a sample tfa jkljankjbfhbfklhabitle</h3>
</div>

<ul class="col-md-12">


         <li class="col-md-6 pull-left"><i class="fa fa-university" aria-hidden="true"> Fees</i></li>
         <li class="col-md-6 pull-right"><i class="fa fa-university" aria-hidden="true"> Rating</i></li>

       <li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> Duration </i></li>
       <li class="col-md-6 pul"><i class="fa fa-university" aria-hidden="true"> University </i></li>

         </ul>
         </div>
       <div>
         <ul>
         <li class="col-md-6">
         <a href="" type="submit" class="btn btn-primary">Go to course>></a>
         </li>
         <li class="col-md-6">

         <a href="" type="submit" class="btn btn-primary ">Remove</a>
</li>         
         </ul>
         </div>
         </div>
      </li>
      </ul>
      </div>
</div>
<div class="col-md-8 red">
<div class="col-md-6">
 <h4 style="text-align:center">Done</h4>

<section class="leftbox" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" >
 <button id="menu" onclick="changec()" class="pull-right fixed-top">+</button>
   </section>
</div>

<div class="col-md-6">
<h4 style="text-align:center">Tracking</h4>
<section class="rightbox" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
 <button id="menu" onclick="changec2()" class="pull-right fixed-top">+</button>
 </section>
</div>
<div class="col-md-6">
<h4 style="text-align:center">Pursuing</h4>

<section class="leftbox2" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">

   <button id="menu" onclick="changec3()" class="pull-right fixed-top">+</button>
</section>
</div>
<div class="col-md-6">
<h4 style="text-align:center">Dropped</h4>

<section class="rightbox2" id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">

   <button id="menu" onclick="changec4()" class="pull-right fixed-top">+</button>
</section>
</div>
</div>
</div>

最佳答案

从这个答案中得到帮助 - HTML disable Drop event, div box child contents overlap稍微修改了你的功能。试试这个。

     function drop(ev) {

        var eleid = ev.dataTransfer.getData("Text");
        var el = ev.target; 

        if (el.id != 'div1' && el.id != 'div2' && el.id != 'div3' && el.id != 'div4') {
           // el = el.parentNode;

            if(el.id != 'div6') {
                el = document.getElementById('div6');
            }               
        }
        el.appendChild(document.getElementById(eleid));
        ev.preventDefault();
}

关于javascript - 如何使用javascript停止拖放中的div重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38346006/

文章推荐： python - 如何使用嵌套索引为数组元素分配新值？

文章推荐： java - 使用 Eclipse Code Formatter for Java 在 if() 中的条件缩进

python - 停止 Winsound/停止 Python 上的线程
我正在使用 Tkinter 在 python 上写一个小游戏(顺便说一下，我不允许使用任何其他非内置模块)并且我想在主窗口上播放背景歌曲，这是那个包含标题，以及转到其他窗口和内容的按钮... 所以问题
azure - 停止 Azure 服务*不会*停止 WebJob 在其后面持续运行
我有一个 Azure WebJob，它在一个非常简单的应用服务标准:1 Small(计划)上运行。现在，我的 WebJob(有 5 个函数正在运行)出现问题 - 我想停止 5 个正在运行的函数中的
objective-c - XCode 调试器在“停止”按钮上使用 SIGKILL 停止
我在 MacOS Lion 上使用 XCode 4.2。在模拟器中调试 iPhone/iPad 应用程序时，我使用 XCode 工具栏上的“停止”按钮(产品 | 停止)退出应用程序。在此之后，XCod
makefile - ***配方在第一个目标之前开始。停止
我刚刚下载了android开放源代码项目，并尝试使用make来构建它，我收到了以下消息: build/core/prebuilt.mk:91: *** recipe commences before
Makefile 缺少分隔符。停止
我以前从未制作过 makefile，但我们已经收到了这个，但是，如果我尝试运行它，它只会说， missing separator. stop. 我不知道可能出了什么问题 - 我已经确保空格只按制表符。
iphone - 停止 NSTimer
好吧，这段代码非常基本。用户将答案输入文本框，如果等于“第一+第二”，他们就得到一分。然后，他们有 5 秒钟的时间回答下一个数学问题。如果他们这样做了，函数“doCalculation”将再次运行，他
ios - 停止 animateWithDuration
我在 viewController 中有一个循环动画 - (void)moveAnimating { [UIView animateWithDuration:2.0f animations:^
Iphone 停止 ASIFormDataRequest
当我有一个待处理的 ASIFormDataRequest(作为异步任务启动)仍在执行并且用户按下后退按钮(为了弹出 View )时，我的 viewController 出现问题。有什么方法可以停止该
flashdevelop 停止，没有明确的编译错误
我们正在使用 flashdevelop 和 flash CS 3 开发基于 flash 的游戏。我们正在使用 flash CS3 发布 swc，swc 将作为库在 flashdevlop 中使用。一
cocoa - 停止 NSRunLoop
我在线程中有一个连接，因此我将其添加到运行循环中以获取所有数据: [[NSRunLoop currentRunLoop] run]; [connection scheduleInRunLoop
php socket_accept 停止
你好，我做了一个 php 套接字服务器来从 plc 获取数据，plc 被配置为 tcp 套接字客户端。我有一个严重的问题，如果本地网络出现故障，似乎功能 socket_accept 停止，plc 无
javascript - 停止 setTimeOut();
这个问题已经有答案了: How to stop a setTimeout loop? (10 个回答) 已关闭 8 年前。请帮助获得正确的函数或方法来停止 setTimeout 函数。我一直在尝试
scala - 设置使SBT在错误时快速失败(停止)
我正在运行一个多项目SBT(v0.13)构建，并且希望它在子项目中遇到的第一个错误(编译)时快速失败(停止)。当前的行为是，当某项无法在子项目中进行编译时，构建将继续(以编译所有其他子项目)。一旦
java - 停止.wav
我有播放.wav文件中声音的代码，但是我无法停止播放歌曲，甚至无法退出程序直到播放结束。因为这是一首5分钟的歌曲，所以这是一个问题。这是我如何播放wav的代码: public class EasySo
jsf - 通过JSF应用播放音频并控制开始/停止
我正在寻找一种解决方案，该如何控制从JSF应用程序播放音频文件。我不需要完整的解决方案，只需引用我可以用来控制播放音频文件(开始/停止/更改声音)的组件即可。我尝试搜索过去的问题，但没有成功。我
powershell - Powershell用arg启动/停止
我已经在test.ps1中编写了以下函数，在运行该脚本以启动/停止/ ..时我想做一个选择: function getState($SeviceName) { $server = @('hos
javascript - vuejs定时器组件重启/停止
我必须设置一个 10 分钟的计时器，它会重定向到主屏幕。此外，它必须在每个操作(例如按下按钮)时重置。我找到了这个计时器:https://github.com/fengyuanchen/vue-cou
audio - HTML音频播放/停止
我正在制作一个聊天应用程序，功能之一就是发送声音。发送的HTML如下: LOL Stop Play 第一次发送时，“自动播放”效果很好。因此，现在我
带有开始/停止/重置和用户输入时间的javascript倒计时
我基本上希望页面能够接受用户输入的时间(以秒为单位)。之后我希望当用户按下“开始”按钮时开始倒计时按下暂停按钮时“暂停”。还有一个重置按钮，以便用户可以从头开始倒计时。这是我到目前为止得到的:
javascript - 停止$.each，加载图像然后继续循环
我需要停止 $.each 循环，加载图像，然后继续循环。我有 Canvas ，可以在其中加载对象图像。对象以正确的顺序排列在数组中。现在，当我尝试从数组加载对象时，存在一个问题:由于尺寸不同，并且它们

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何使用javascript停止拖放中的div重叠