文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何拖放选定元素的多个元素底部

问如何拖放选定元素的多个元素底部
EN

Stack Overflow用户
提问于 2021-08-07 15:45:47
回答 1查看 335关注 0票数 0

我想发展扑克牌游戏，并希望移动多张牌之间的甲板。所以我只是建立了一个简单的拖曳和悬垂的例子。

index.html

代码语言：javascript
复制
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="example-parent">
    <div class="example-origin" ondragover="onDragOver(event);" ondrop="onDrop(event);">
      <div id="draggable-1" class="example-draggable" draggable="true" 
      ondragstart="onDragStart(event);" >
        item1
      </div>
      <div id="draggable-2" class="example-draggable" draggable="true" 
       ondragstart="onDragStart(event);" >
        item2
      </div>
      <div id="draggable-3" class="example-draggable" draggable="true" 
       ondragstart="onDragStart(event);" >
         item3
      </div>
      <div id="draggable-4" class="example-draggable" draggable="true" 
       ondragstart="onDragStart(event);" >
         item4
      </div>
    </div>
  
    <div class="example-dropzone" ondragover="onDragOver(event);" ondrop="onDrop(event);">
      dropzone
    </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

style.css

代码语言：javascript
复制
body{
width: 40%;
}

.example-parent {
border: 2px solid #DFA612;
color: black;
display: flex;
font-family: sans-serif;
font-weight: bold;
}

.example-origin {
flex-basis: 100%;
flex-grow: 1;
padding: 10px;
}

.example-draggable {
background-color: #4AAE9B;
font-weight: normal;
margin-bottom: 10px;
margin-top: 10px;
padding: 10px;
}

.example-dropzone {
background-color: #6DB65B;
flex-basis: 100%;
flex-grow: 1;
padding: 10px;
}

script.js

代码语言：javascript
复制
function onDragStart(event) {
event
  .dataTransfer
  .setData('text/plain', event.target.id);
event.currentTarget.style.backgroundColor = 'yellow';
}

function onDragOver(event) {
    event.preventDefault();
}

function onDrop(event) {
const id = event
  .dataTransfer
  .getData('text');

const draggableElement = document.getElementById(id);  
const dropzone = event.target;
dropzone.appendChild(draggableElement);
event.dataTransfer.clearData();
}

​

代码语言：javascript
复制
function onDragStart(event) {
    event
      .dataTransfer
      .setData('text/plain', event.target.id);
    event.currentTarget.style.backgroundColor = 'yellow';
}

function onDragOver(event) {
    event.preventDefault();
}

function onDrop(event) {
    const id = event
      .dataTransfer
      .getData('text');
    
    const draggableElement = document.getElementById(id);  
    const dropzone = event.target;
    dropzone.appendChild(draggableElement);
    event.dataTransfer.clearData();
}
代码语言：javascript
复制
body{
    width: 40%;
}

.example-parent {
    border: 2px solid #DFA612;
    color: black;
    display: flex;
    font-family: sans-serif;
    font-weight: bold;
  }
  
  .example-origin {
    flex-basis: 100%;
    flex-grow: 1;
    padding: 10px;
  }
  
  .example-draggable {
    background-color: #4AAE9B;
    font-weight: normal;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px;
  }
  
  .example-dropzone {
    background-color: #6DB65B;
    flex-basis: 100%;
    flex-grow: 1;
    padding: 10px;
  }

This is how it is working.
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="example-parent">
        <div class="example-origin" ondragover="onDragOver(event);" ondrop="onDrop(event);">
          <div id="draggable-1" class="example-draggable" draggable="true" ondragstart="onDragStart(event);" >
            item1
          </div>
          <div id="draggable-2" class="example-draggable" draggable="true" ondragstart="onDragStart(event);" >
            item2
          </div>
          <div id="draggable-3" class="example-draggable" draggable="true" ondragstart="onDragStart(event);" >
             item3
          </div>
          <div id="draggable-4" class="example-draggable" draggable="true" ondragstart="onDragStart(event);" >
             item4
          </div>
        </div>
      
        <div class="example-dropzone" ondragover="onDragOver(event);" ondrop="onDrop(event);">
          dropzone
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

​

但我想要拖动多个元素。例如，当我拖动item2、item3和item4时，必须使用item2拖动，或者当拖动item3时，item4必须是可拖动的。而且当我拖动物品时，如何用鼠标改变它们的位置。

javascript
drag-and-drop
position
draggable
drop
EN

回答 1

Stack Overflow用户

发布于 2021-08-10 06:29:12

这是密码，我发现了我的问题。

​

代码语言：javascript
复制
var x="";
var y="";
var selected="";
var allelement="";

function onDragStart(event) {  
  x=event.pageX;
  y=event.pageY;
  event
      .dataTransfer
      .setData('text/plain', event.target.id);
    
  allelement = Array.prototype.slice.call( document.getElementById(event.target.id).parentElement.children )

  var index = allelement.indexOf(event.target)
  selected= allelement.slice(index)
  event.dataTransfer.setDragImage(new Image("0", "0"), -10, -10);
  event.currentTarget.style.backgroundColor = 'yellow';
}
function drag(event){
  const movex=event.pageX - x;
  const movey=event.pageY - y;

  selected.forEach((item)=>{
  var element = document.getElementById(item.id);
  var css=
  "z-index:9999;pointer-events: none; transform: scale(1.05, 1.05) rotate(0deg) translate(" +
  movex +
  "px, " +
  movey +
  "px);";
  element.style.cssText = css;
})
}

function onDragEnter(event) {
    event.preventDefault();
    console.log("dragenter ", event.target.id);
}

function onDragOver(event) {
    event.preventDefault();
}

function onDrop(event) {
 
    const id = event
      .dataTransfer
      .getData('text');

    const dropzone = event.target;
    selected.forEach((element)=>{

      var css = "z-index:0;pointer-events:auto;";
      element.style.cssText = css;
      dropzone.appendChild(element);
    })
    
}
代码语言：javascript
复制
body{
    width: 80%;
}

.example-parent {
    border: 2px solid #DFA612;
    color: black;
    display: flex;
    font-family: sans-serif;
    font-weight: bold;
  }
  
  .example-origin {
    flex-basis: 100%;
    flex-grow: 1;
    padding: 10px;
  }
  
  .example-draggable {
    background-color: #4AAE9B;
    font-weight: normal;
    margin-bottom: 10px;
    margin-top: 30px;
    padding: 10px;
    width: 50px;
  }
  
  .example-dropzone {
    background-color: #6DB65B;
    flex-basis: 100%;
    flex-grow: 1;
    padding: 10px;
    margin-left:100px ;
  }
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="example-parent">
        <div class="example-origin" ondragover="onDragOver(event);" >
          <div id="draggable-1" class="example-draggable" draggable="true"  ondragenter="onDragEnter(event)" ondragstart="onDragStart(event);" ondrag="drag(event)" >
            item1
          </div>
          <div id="draggable-2" class="example-draggable" draggable="true" ondragenter="onDragEnter(event)" ondragstart="onDragStart(event);" ondrag="drag(event)" >
            item2
          </div>
          <div id="draggable-3" class="example-draggable" draggable="true" ondragenter="onDragEnter(event)" ondragstart="onDragStart(event);" ondrag="drag(event)" >
             item3
          </div>
          <div id="draggable-4" class="example-draggable" draggable="true" ondragenter="onDragEnter(event)" ondragstart="onDragStart(event);" ondrag="drag(event)" >
             item4
          </div>
        </div>
      
        <div class="example-dropzone" id="dropzone-0"  ondragenter="onDragEnter(event)" ondragover="onDragOver(event);" ondrop="onDrop(event)" >
          dropzone
        </div>
        <div class="example-dropzone" id="dropzone-1"  ondragenter="onDragEnter(event)" ondragover="onDragOver(event);" ondrop="onDrop(event)" >
          dropzone
        </div>
        <div class="example-dropzone" id="dropzone-2"  ondragenter="onDragEnter(event)" ondragover="onDragOver(event);" ondrop="onDrop(event)">
          dropzone
        </div>
        <div class="example-dropzone" id="dropzone-3"  ondragenter="onDragEnter(event)" ondragover="onDragOver(event);" ondrop="onDrop(event)">
          dropzone
        </div>
    </div>
<script >

</script>
</body>
</html>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/68693880

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档