拖放无法正常工作
[英]drag and drop not working properly
问题描述
我是javascript新手。 下面是我的拖放HTML。 还原无法正常工作。 请帮助我为什么它不能正常工作。
还原在落下之前可以正常工作，但不会返回到原始位置
<!DOCTYPE html>
<html ng-app="first22">
<head>
<link rel="icon" type="image/png" href="globe/images/correct.png"/>
<link rel="stylesheet" type="text/css" href="globe/css/style.css"/>
<script type="text/javascript" src="globe/script/jquery.js"></script>
<script type="text/javascript" src="globe/script/jquery-ui.js"></script>
<title>
Html5 All in One
</title>
<style>
*{padding:0;margin:0}
#interactive
{
position:absolute;
width:895px;
height:695px;
margin:auto;
left:0;
right:0;
background:#f3f3f3;
}
.dragbg,.drop
{
position:absolute;
width:171px;
height:52px;
background:#c0c0c0;
font-size:20px;
border-radius:25px;
text-align:center;
}
.drag
{
width:160px;
height:40px;
background:#c2c2c2;
border:1px solid;
font-size:20px;
border-radius:25px;
text-align:center;
position:absolute;
margin-top:5px;
margin-left:5px;
line-height:40px;
cursor:pointer;
}
.drag:hover
{
background:#fff;
}
.drop1
{
width:160px;
height:40px;
background:#c2c2c2;
border:1px solid;
font-size:20px;
border-radius:25px;
text-align:center;
position:absolute;
top:5px;
left:5px;
line-height:40px;
cursor:pointer;
}
</style>
</head>
<body>
<div id="interactive">
<div style="position:absolute;left:0px;top:50px;width:100%;text-align:center;font-size:28px;font-weight:bold">Common Drag and Drop</div>
<div class="dragbg" style="left:120px;top:150px;">
<div class="drag" >Meter</div>
</div>
<div class="dragbg" style="left:120px;top:220px;">
<div class="drag">MilliMeter</div>
</div>
<div class="dragbg" style="left:120px;top:290px;">
<div class="drag">CentiMeter</div>
</div>
<div class="dragbg" style="left:120px;top:360px;">
<div class="drag">Gram</div>
</div>
<div class="dragbg" style="left:120px;top:430px;">
<div class="drag">MilliGram</div>
</div>
<div class="dragbg" style="left:120px;top:500px;">
<div class="drag">KiloGram</div>
</div>
<div class="drop" style="left:320px;top:150px;">
</div>
<div class="drop" style="left:320px;top:220px;">
</div>
<div class="drop" style="left:320px;top:290px;">
</div>
<div class="drop" style="left:320px;top:360px;">
</div>
<div class="drop" style="left:320px;top:430px;">
</div>
<div class="drop" style="left:320px;top:500px;">
</div>
</div>
</body>
<script>
$("document").ready(function()
{
$(".drag").draggable(
{
containment:"#interactive",
revert:function(event,ui)
{
$(this).data("uiDraggable").originalPosition=
{
left:0,
top:0
};
return !event;
},
zindex:1000,
drag:function(event,ui)
{
$(this).css("z-index",2000);
}
});
$(".drop").droppable(
{
drop:function(event,ui)
{
$(this).append(ui.draggable)
$(this).find(".drag").each(function()
{
$(this).css("position","absolute");
$(this).css({"top":"0px","left":"0px"});
});
}
});
})
</script>
</html>
2 个解决方案
解决方案1
1 2014-07-21 07:40:04
您将拖动附加到其占位符，该占位符更改了拖动对象的父对象。 因此，它将更改它与新容器的关系。 您只需要移动拖动的位置，将其保留到其父容器即可。 另外，您还必须相对于其容器放置div。
$(".drop").droppable(
{
drop:function(event,ui)
{
var pos = $(this).offset();
var ppos = $(ui.draggable).parent().offset();
var left = pos.left - ppos.left;
var top = pos.top - ppos.top;
$(ui.draggable).css({"left" : left, "top": top})
$(this).find(".drag").each(function()
{
$(this).css("position","absolute");
$(this).css({"top":"0px","left":"0px"});
});
}
});
您的小提琴更新了http://jsfiddle.net/XSXA6/18/
解决方案2
0 已采纳 2014-07-21 07:20:49
我认为此行为是因为要在可拖放对象中附加可拖动对象，从而更改位置坐标。 您无需在Droppable初始化中做任何事情，它就会起作用。
演示： http : //jsfiddle.net/XSXA6/15/
JS：
$(document).ready(function () {
$(".drag").draggable({
containment: "#interactive",
revert: function (event, ui) {
$(this).data("uiDraggable").originalPosition = {
left: 0,
top: 0
};
return !event;
},
zindex: 1000,
drag: function (event, ui) {
$(this).css("z-index", 2000);
}
});
$(".drop").droppable({
drop: function (event, ui) {
console.log(ui.draggable, $(this));
var d = $(this)
$(ui.draggable).position({
my: "center",
at: "center",
of: d
});
}
});
});
拖放无法正常运行processing.js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.