我在底部加载的<iframe>产品，您要拖动的个人<div>都在屏幕顶部。在顶部，根据需要，如图所示，框架的大小将从 1 到 5 <div>s 和背景右框架。
当您完成将产品添加到框架中并单击键或鼠标按钮以跳转到购物篮和完成顺序时。
请帮助走哪条路。jQuery UI 或者 Mootools？以及最简单的方法来做到这一点。
问问题
170 次
1 回答
0
尝试修改此页面中的代码。它基于移动 DIV，但只需更改 DROP 功能即可根据您的要求进行修改。请注意，您展示的示例并不理想，因为它没有突出显示允许您放置对象的位置，而这个示例可以。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.box { width: 350px;
height: 70px;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #aaaaaa;}
.obj { width: 220px;
font-family: verdana, arial, sans-serif;
font-size: 8pt;
border: 2px solid #808080;
border-radius: 4px; padding: 8px;}
#dragApp {background: #bbffbb;}
#dragAny {
position: absolute;
left: 450px;
top: 10px;
background: #ffbbbb;}
#dragBox {
position: absolute;
right: 10px;
top: 10px;
background: #bbbbff;}
#dragFlt {
position: static;
float: right;
background: #ffcc0f;}
.closeBox {
float: right;
display: inline-block;
margin: -6px -6px 0px 6px;
padding: 8px 2px 10px 2px;
cursor:pointer;
color: #eebbbb;
background: #dd8888;
border-radius: 3px;
line-height: 0px;
font-size: 14px;
font-weight: bold;
text-decoration: none;}
.closeBox:hover {
color: #ffdddd;
background: #ee6666;}
</style>
<script>
function ge$(d) {
var x = document.getElementById(d);
if (!x) {
var y = document.getElementsByName(d);
if (y.length>0) x = y[0];
}
return x;}
function winScrollX() {
var x = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
return x;}
function winScrollY() {
var y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
return y;}
function addEventHandler(elem,eventType,handler) {
if (elem.addEventListener)
elem.addEventListener(eventType,handler,false);
else if (elem.attachEvent)
elem.attachEvent('on'+eventType,handler);
}
function removeEventHandler(elem,eventType,handler) {
if (elem.removeEventListener)
elem.removeEventListener(eventType,handler,false);
if (elem.detachEvent)
elem.detachEvent('on'+eventType,handler);
}
function stopBubble(e) {
var evt = e ? e : window.event;
if (evt.stopPropagation) evt.stopPropagation();
if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
function stopDefault(e) {
var evt = e ? e : window.event;
if (evt.preventDefault) evt.preventDefault();
evt.returnValue = false;
return false;
}
var dragObj = [];
var dragBox = [];
var dragApp = [];
var dragItm = '';
setDrag = function(idObj, idBox, appChild) {
if (dragObj.indexOf(idObj) == -1) {
var obj = ge$(idObj);
obj.draggable = true;
addEventHandler(obj,'dragstart',drag_start,false);
addEventHandler(obj,'dragend',drag_end,false);
obj.style.cursor = 'move';
}
if (dragBox.indexOf(idBox) == -1) {
var box = (idBox == 'body' ? document.body : ge$(idBox));
addEventHandler(box,'dragover',drag_over,false);
addEventHandler(box,'drop',drag_drop,false);
}
var i = dragObj.length;
dragObj[i] = idObj;
dragBox[i] = idBox;
dragApp[i] = !!appChild;
}
function drag_start(e) {
var evt = e ? e : window.event;
this.style.opacity = 0.33;
dragItm = this.id;
var offsets = this.getBoundingClientRect();
evt.dataTransfer.setData("Text", (offsets.left-evt.clientX+winScrollX()) + ',' + (offsets.top-evt.clientY+winScrollY()));
evt.dataTransfer.effectAllowed = 'move';
}
function drag_end(e) {
this.style.opacity = 1.0;}
function drag_over(e) {
var evt = e ? e : window.event;
var idObj = dragItm;
var idBox = (evt.currentTarget == document.body ? 'body' : evt.currentTarget.id);
var fnd = false;
for (var i=0, len=dragObj.length; i<len; i++) {
if (dragObj[i] == idObj && dragBox[i] == idBox) {
fnd = true;
break;
}
}
if (fnd) {
evt.dataTransfer.dropEffect = 'move';
stopDefault(evt);
stopBubble(evt);
} else {
evt.dataTransfer.dropEffect = 'none';
}
}
function drag_drop(e) {
var evt = e ? e : window.event;
var idObj = dragItm;
var idBox = (evt.currentTarget == document.body ? 'body' : evt.currentTarget.id);
var fnd = false;
for (var i=0, len=dragObj.length; i<len; i++) {
if (dragObj[i] == idObj && dragBox[i] == idBox) {
fnd = true;
var app = dragApp[i];
break;
}
}
if (fnd) {
var obj = ge$(idObj);
if (app) {
evt.currentTarget.appendChild(obj);
} else {
var params = evt.dataTransfer.getData("Text").split(',');
obj.style.position = 'absolute';
obj.style.left = (evt.clientX + parseInt(params[0],10)) + 'px';
obj.style.top = (evt.clientY + parseInt(params[1],10)) + 'px';
}
stopDefault(evt);
stopBubble(evt);
}
}
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(value) {
for (var i=0, len=this.length; i<len; i++) {
if (this[i] === value) return i;
}
return -1;
}
}
function closeBox(obj) {obj.style.display = 'none';}
</script>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="dragApp" class="obj">This one appends to either box.</div>
<div id="dragAny" class="obj"><div class="closeBox" onclick="closeBox(this.parentNode);return false;">X</div>This one can be dragged anywhere.</div>
<div id="dragBox" class="obj">This one can only go in the top box.</div>
<p>I decided to look into HTML5 drag and drop. I found several examples online, but none seemed to
provide any validation of where the items were being dragged except when they were actually dropped.
So I created this page as an example of how to do it.</p>
<div id="dragFlt" class="obj"><div class="closeBox" onclick="closeBox(this.parentNode);return false;">X</div>This float goes in the bottom box.</div>
<p>Note that the example built into this page won't work in IE9 as I've set DIV elements to drag,
but IE9 only supports IMG and A-HREF elements.</p>
<p>I wrapped the whole thing in a setDrag function that takes in the ids of the object to be dragged
and the location where it can be dropped. If the drop is to be completed by appending the object as a
child then a third argument should be set to true.</p>
<p>There are seven events involved in dragging and dropping:</p>
<pre>
object dragstart when object first moved
drag while object is being moved
dragend when the object is dropped
target dragenter when object enters the target
dragover while object is over the target
dragleave when object leaves the target
drop when the object is dropped
</pre>
<p>The dragstart/dragend events are useful for changing the object appearance, and for initialling the
cursor types and obect data in dataTransfer. The drag event isn't used here.</p>
<p>I don't use the dragenter/dragleave events. The drop event is the one that handles the moving of the
object by changing its position/DOM location. The key is the dragover event as this determines where a
drop can actually be made. The default is to not allow a drop so unless it performs a stopDefault() then
no drop will be allowed.</p>
<br>
<p>There are some <b>gotchas:</b></p>
<p>In IE dragover can't use either THIS or dataTransfer to access the object info. So to get the id of
the object in dragover you need to set a variable in dragstart.</p>
<p>In object events you can use event.target for the object (same as THIS) but in target events you have
to use event.currentTarget (same as THIS) instead.</p>
<p>FF doesn't need to initialise the effectAllowed but IE does. I'm not use if setting the cursor to 'none'
is required or not.</p>
<p>Because of event bubbling (I think) you still need to validate the combination of object/target in the
drop event.</p>
<script>
setDrag('dragApp','box1',true);
setDrag('dragApp','box2',true);
setDrag('dragAny','body');
setDrag('dragBox','box1');
setDrag('dragFlt','box2');
</script>
</body>
</html>
于 2013-07-16T02:53:42.127 回答