防止在拖动时拖放子元素内的元素与JS下降 [英] prevent drop inside a child element when drag & dropping with JS

查看：76
本文介绍了防止在拖动时拖放子元素内的元素与JS下降的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了一个简单的拖放设置，2个div，允许用户在两​​者之间拖动一个子div。它工作正常，除非'小孩div'直接掉入另一个。我一直试图将我的头围绕几个小时，并且必须有一个简单的解决方案，我错过了。



你可以在这里看到一个（不太完美）的演示
https://preview.c9.io/teemoash/fantasyleague/gamething/pete.html?_c9_id = livepreview4& _c9_host = https％3A％2F％2Fide.c9.io



非常感谢任何帮助



谢谢！

html非常简单。 （请注意，我已经尝试在onDrop和onDragOver事件上返回false）

 < div id =squadondrop =drop （event）ondragover =allowDrop（event）> 
< h1> SQUAD< / h1> 
< div id =jeffclass =championdraggable =trueondragstart =drag（event）ondrop =return falseondragover =return false> 
< h1> Jeff< / h1> 
 
< div class =attributes> 
< div class =number kills>< span> 4℃; /跨度>< p为H.杀死< / P>< / DIV> 
< div class =number deaths>< span> 2< / span>< p>死亡< / p>< / div> 
< div class =number GPM>< span> 12 LT; /跨度>< p为H. GPM< / P>< / DIV> 
 
< / div> 
< / div> 
 
 
 
< h1> Geoff< / h1> 
 
< div class =attributes> 
< div class =number kills>< span> 7 LT; /跨度>< p为H.杀死< / P>< / DIV> 
< div class =number deaths>< span> 0< / span>< p>死亡< / p>< / div> 
< div class =number GPM>< span> 14 LT; /跨度>< p为H. GPM< / P>< / DIV> 
 
< / div> 
< / div> 
 
< div id =jephclass =championdraggable =trueondragstart =drag（event）ondrop =return falseondragover =return false> 
< h1> Jeph< / h1> 
 
< div class =attributes> 
< div class =number kills>< span> 1·/跨度>< p为H.杀死< / P>< / DIV> 
< div class =number deaths>< span> 9< / span>< p>死亡< / p>< / div> 
< div class =number GPM>< span> 24 LT; /跨度>< p为H. GPM< / P>< / DIV> 
 
< / div> 
< / div> 
 
< / div> <！ - 小队结束 - > 
 
< div id =myTeamondrop =drop（event）ondragover =allowDrop（event）> 
< h1>我的团队< / h1> 
 
< / div> 
 
< div id =scores> 
< h1>我的团队分数< / h1> 
< / div>

，js看起来像这样; 

 <脚本> 
 
 
函数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））; 
 
} 
< / script>


解决方案

问题在于下降与事件有关，但你拥有它的方式应该像这样绑定到元素： 

  function drop（ev，el）{ 
 ev.preventDefault（）; 
 var data = ev.dataTransfer.getData（text）; 
 el.appendChild（document.getElementById（data））; 
 
 $ / code>

然后改变你的 drop（event）到 drop（event，this）在你的两个 ondrop 事件中。看一下完整页面模式中的代码片段，看看它是否有效。



function allowDrop（ev）{ev。 （）; evDefaultDefault（）;}这个函数可以用来调用函数drop（ev，el）和evDataTransfer.setData（text，ev.target.id）。 var data = ev.dataTransfer.getData（text）; el.appendChild（document.getElementById（data））;}

* {margin：0; box-sizing：border-box;}＃squad {width：40vw;身高：90vh; overflow-y：scroll; border-radius：10px; margin-left：5vw; margin-top：5vh;背景颜色：红色; float：left;} h1 {text-align：center;}＃myTeam {float：left;身高：60vh;宽度：40vw; border-radius：10px;背景颜色：红色; margin-left：10vw; margin-top：5vh;}＃分数{width：40vw;身高：25vh; margin-top：5vh; margin-left：10vw;背景颜色：红色; border-radius：10px; float：left;}。champion {width：90％;身高：15vh;保证金：1％;填充：2％;边框：1px黑色实心;背景颜色：白色; border-radius：10px; overflow：hidden;}。champion h1 {float：left;}。attributes {margin-left：10％; float：left;}。number {float：left; text-align：center; margin-left：10px;}＃div1，＃div2 {width：90％;身高：15vh;保证金：1％;边框：1px黑色实心; border-radius：10px;}

< div id = squadondrop =drop（event，this）ondragover =allowDrop（event）> < H1> SQUAD< / H1> < div id =jeffclass =championdraggable =trueondragstart =drag（event）ondrop =return falseondragover =return false> < H1>杰夫< / H1> < div class =attributes> < div class =number kills>< span> 4℃; /跨度> < p为H.杀死< / p为H. < / DIV> < div class =number deaths>< span> 2< / span> < p为H.死亡及LT; / p为H. < / DIV> < div class =number GPM>< span> 12 LT; /跨度> < p为H. GPM< / p为H. < / DIV> < / DIV> < / DIV> < div id =Geoffclass =championdraggable =trueondragstart =drag（event）ondrop =return falseondragover =return false> < H1>杰夫< / H1> < div class =attributes> < div class =number kills>< span> 7 LT; /跨度> < p为H.杀死< / p为H. < / DIV> < div class =number deaths>< span> 0< / span> < p为H.死亡及LT; / p为H. < / DIV> < div class =number GPM>< span> 14 LT; /跨度> < p为H. GPM< / p为H. < / DIV> < / DIV> < / DIV> < div id =jephclass =championdraggable =trueondragstart =drag（event）ondrop =return falseondragover =return false> < H1> Jeph< / H1> < div class =attributes> < div class =number kills>< span> 1·/跨度> < p为H.杀死< / p为H. < / DIV> < div class =number deaths>< span> 9< / span> < p为H.死亡及LT; / p为H. < / DIV> < div class =number GPM>< span> 24 LT; /跨度> < p为H. GPM< / p为H. < / DIV> < / DIV> < / div>< / div><！ - 队尾div - >< div id =myTeamondrop =drop（event，this）ondragover =allowDrop（event）> ; < h1>我的团队< / h1>< / div>< div id =scores> < h1>我的团队评分< / h1>< / div>

I've created a simple drag and drop setup, 2 divs that allow a user to drag a child div between the two. It works fine unless a 'child div' is dropped directly inside another. I've been trying to wrap my head around it for hours and there must be a simple solution i am missing.

You can see a (not quite) working demo here https://preview.c9.io/teemoash/fantasyleague/gamething/pete.html?_c9_id=livepreview4&_c9_host=https%3A%2F%2Fide.c9.io

any help is greatly appreciated

Thanks!

The html is very simple. ( note that i have tried returning false on onDrop and onDragOver events)

    <div id = "squad" ondrop="drop(event)" ondragover="allowDrop(event)">
    <h1>SQUAD</h1>
    <div id = "jeff" class = "champion" draggable = "true" ondragstart="drag(event)" ondrop = "return false" ondragover="return false">
        <h1>Jeff</h1>

        <div class = "attributes">
            <div class = "number kills"><span> 4</span><p>Kills</p></div>
            <div class = "number deaths"><span>2 </span><p>Deaths</p></div>
            <div class = "number GPM"><span> 12</span><p>GPM</p></div>

        </div>
    </div>


    <div id = "Geoff" class = "champion" draggable = "true" ondragstart="drag(event)" ondrop = "return false" ondragover="return false">
        <h1>Geoff</h1>

        <div class = "attributes">
            <div class = "number kills"><span> 7</span><p>Kills</p></div>
            <div class = "number deaths"><span>0 </span><p>Deaths</p></div>
            <div class = "number GPM"><span> 14</span><p>GPM</p></div>

        </div>
    </div>

    <div id = "jeph" class = "champion" draggable = "true" ondragstart="drag(event)" ondrop = "return false" ondragover="return false">
        <h1>Jeph</h1>

        <div class = "attributes">
            <div class = "number kills"><span> 1</span><p>Kills</p></div>
            <div class = "number deaths"><span>9 </span><p>Deaths</p></div>
            <div class = "number GPM"><span> 24</span><p>GPM</p></div>

        </div>
    </div>

</div> <!-- end of squad div-->

<div id = "myTeam" ondrop="drop(event)" ondragover="allowDrop(event)">
    <h1>My Team</h1>

</div>

<div id = "scores">
    <h1>My Team Scores</h1>
</div>

and the js looks like this;

<script>


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

}
</script>

解决方案

The problem is that the drop is tied to the event, but the way you have it it should just be tied to the element like this:

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

Then change your drop(event) to drop(event, this) in your two ondrop events. Take a look at the snippet in Full Page mode to see that it works.

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

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

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

* {
  margin: 0;
  box-sizing: border-box;
}
#squad {
  width: 40vw;
  height: 90vh;
  overflow-y: scroll;
  border-radius: 10px;
  margin-left: 5vw;
  margin-top: 5vh;
  background-color: red;
  float: left;
}
h1 {
  text-align: center;
}
#myTeam {
  float: left;
  height: 60vh;
  width: 40vw;
  border-radius: 10px;
  background-color: red;
  margin-left: 10vw;
  margin-top: 5vh;
}
#scores {
  width: 40vw;
  height: 25vh;
  margin-top: 5vh;
  margin-left: 10vw;
  background-color: red;
  border-radius: 10px;
  float: left;
}
.champion {
  width: 90%;
  height: 15vh;
  margin: 1%;
  padding: 2%;
  border: 1px black solid;
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
}
.champion h1 {
  float: left;
}
.attributes {
  margin-left: 10%;
  float: left;
}
.number {
  float: left;
  text-align: center;
  margin-left: 10px;
}
#div1,
#div2 {
  width: 90%;
  height: 15vh;
  margin: 1%;
  border: 1px black solid;
  border-radius: 10px;
}

<div id="squad" ondrop="drop(event, this)" ondragover="allowDrop(event)">
  <h1>SQUAD</h1>

  <div id="jeff" class="champion" draggable="true" ondragstart="drag(event)" ondrop="return false" ondragover="return false">
    <h1>Jeff</h1>

    <div class="attributes">
      <div class="number kills"><span> 4</span>
        <p>Kills</p>
      </div>
      <div class="number deaths"><span>2 </span>
        <p>Deaths</p>
      </div>
      <div class="number GPM"><span> 12</span>
        <p>GPM</p>
      </div>
    </div>
  </div>
  <div id="Geoff" class="champion" draggable="true" ondragstart="drag(event)" ondrop="return false" ondragover="return false">
    <h1>Geoff</h1>

    <div class="attributes">
      <div class="number kills"><span> 7</span>
        <p>Kills</p>
      </div>
      <div class="number deaths"><span>0 </span>
        <p>Deaths</p>
      </div>
      <div class="number GPM"><span> 14</span>
        <p>GPM</p>
      </div>
    </div>
  </div>
  <div id="jeph" class="champion" draggable="true" ondragstart="drag(event)" ondrop="return false" ondragover="return false">
    <h1>Jeph</h1>

    <div class="attributes">
      <div class="number kills"><span> 1</span>
        <p>Kills</p>
      </div>
      <div class="number deaths"><span>9 </span>
        <p>Deaths</p>
      </div>
      <div class="number GPM"><span> 24</span>
        <p>GPM</p>
      </div>
    </div>
  </div>
</div>
<!-- end of squad div-->
<div id="myTeam" ondrop="drop(event, this)" ondragover="allowDrop(event)">
  <h1>My Team</h1>

</div>
<div id="scores">
  <h1>My Team Scores</h1>

</div>

这篇关于防止在拖动时拖放子元素内的元素与JS下降的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆