-
Toutvabien2017-09-04 00:00
- 11
- 39
- 0
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
.box{
margin-top: 20px;
}
.leftbox,.rightbox{
position: relative;
display: inline-block;
margin-left: 180px;
width: 180px;
min-height: 300px;
border: 1px solid #5f5f5f;
z-index: 10;
}
.leftbox span,.rightbox span{
margin: 0 auto;
display: block;
background-color: #1d7ad9;
border-bottom: 1px solid #222222;
height: 50px;
width: 180px;
cursor: move;
}
</style>
</head>
<body>
<div class="box">
<div class="leftbox">
<span></span>
<span></span>
<span></span>
</div>
<div class="rightbox">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
<script>
document.onmousedown=down;
var right=document.querySelector(".rightbox");
var left=document.querySelector(".leftbox");
function down(e){
if(e.target.nodeName.toLowerCase()=="span"){//e.target 的作用
var e=e||window.event;
e.target.setAttribute("draggable","true");
e.target.className="drup";//在这里给目标事件添加class属性的作用
var el=document.querySelector(".drup");//？
if(el.parentNode.className==="leftbox"){
el.ondragstart=function(e){
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("text", e.target.innerHTML);
e.target.style.opacity="0.5"
};
el.ondragend=function(e){
e.target.style.opacity="1"
};
right.ondragover=function(e){
e.preventDefault();
e.dropEffect="move"
};
right.ondrop=function(e){
var span=document.createElement("span");
span.innerHTML=e.dataTransfer.getData("text");
right.appendChild(span);
el.parentNode.removeChild(el);
el.className=""
}
}
else if(el.parentNode.className==="rightbox"){
el.ondragstart=function(e){
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("text", e.target.innerHTML);
e.target.style.opacity="0.5"
};
el.ondragend=function(e){
e.target.style.opacity="1"
}
left.ondragover=function(e){
e.preventDefault();
e.dropEffect="move"
}
left.ondrop=function(e){
var span=document.createElement("span");
span.innerHTML=e.dataTransfer.getData("text");
left.appendChild(span);
el.parentNode.removeChild(el)
el.className=""
}
}
}}问题即上面的注释
0
打赏
收藏
点击回答
您的回答被采纳后将获得：提问者悬赏的 11 元积分
- 共 0 条
- 全部回答
-
茹家菠菜 普通会员 1楼
界面拖拽是一种用户交互方式，让用户通过拖拽对象在界面中移动或重新排列它们。在计算机编程中，这种交互方式常用于用户界面设计。
在前端开发中，我们通常使用HTML、CSS和JavaScript来实现拖拽效果。HTML用于定义界面元素的结构，CSS用于定义元素的样式，JavaScript用于处理拖拽事件，例如添加和删除元素。
在拖拽事件处理函数中，我们通常会使用事件监听器来监听用户对界面元素的拖拽操作。一旦用户开始拖拽操作，我们就监听事件，并根据拖拽的方向和大小来调整元素的位置。
在拖拽事件处理函数中，我们还可能需要监听其他类型的事件，例如当元素被添加到容器中时，我们可能会监听
添加元素事件，当元素被删除时，我们可能会监听删除元素事件。此外，我们还需要考虑拖拽事件的兼容性问题。不同的浏览器对拖拽事件的支持程度不同，我们可能需要使用polyfill来处理一些不支持拖拽的浏览器。
总的来说，界面拖拽是一种强大的用户交互方式，它可以让用户更方便地在界面中移动和重新排列对象。
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部