关于div拖拽,有经验看看

s_liangchao1s 2007-10-10 01:37:42

new Draggable("div1",{revert:true});
new Draggable("div2",{revert:true});
new Draggable("div3",{revert:true});
new Draggable("div4",{revert:true});
new Draggable("div5",{revert:true});
new Draggable("div6",{revert:true});
new Draggable("div7",{revert:true});
new Draggable("div8",{revert:true});
new Draggable("div9",{revert:true});
new Draggable("div10",{revert:true});
Droppables.add("dustbox", {
accept:"item-area",
onDrop: function(draggable, droppable) {
alert('ドロップされたのは、' + draggable.firstChild.nodeName);
}
});




function ondrop(draggable, droppable){
var child = droppable.firstChild;
droppable.removeChild(child);

var parent = droppable.parentNode;
parent.appendChild(child);
droppable.appendChild(draggable);

}


后台的.js文件应该都正确,现在已经能够实现div的拖动,但放置的时候,不执行
function ondrop而且draggable.firstChild.nodeValue也取不到值。。。

说得也不明白,希望有经验的来分析下。。。。
...全文
291 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
梅雪香 2007-10-12
  • 打赏
  • 举报
回复
/**
* Drag.js: drag absolutely positioned HTML elements.
*
* This module defines a single drag( ) function that is designed to be called
* from an onmousedown event handler. Subsequent mousemove events will
* move the specified element. A mouseup event will terminate the drag.
* If the element is dragged off the screen, the window does not scroll.
* This implementation works with both the DOM Level 2 event model and the
* IE event model.
*
* Arguments:
*
* elementToDrag: the element that received the mousedown event or
* some containing element. It must be absolutely positioned. Its
* style.left and style.top values will be changed based on the user's
* drag.
*
* event: the Event object for the mousedown event.
**/
function drag(elementToDrag, event) {
// The mouse position (in window coordinates)
// at which the drag begins
var startX = event.clientX, startY = event.clientY;

// The original position (in document coordinates) of the
// element that is going to be dragged. Since elementToDrag is
// absolutely positioned, we assume that its offsetParent is the
// document body.
var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;

// Even though the coordinates are computed in different
// coordinate systems, we can still compute the difference between them
// and use it in the moveHandler( ) function. This works because
// the scrollbar position never changes during the drag.
var deltaX = startX - origX, deltaY = startY - origY;

// Register the event handlers that will respond to the mousemove events
// and the mouseup event that follow this mousedown event.
if (document.addEventListener) { // DOM Level 2 event model
// Register capturing event handlers
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
}
else if (document.attachEvent) { // IE 5+ Event Model
// In the IE event model, we capture events by calling
// setCapture( ) on the element to capture them.
elementToDrag.setCapture( );
elementToDrag.attachEvent("onmousemove", moveHandler);
elementToDrag.attachEvent("onmouseup", upHandler);
// Treat loss of mouse capture as a mouseup event.
elementToDrag.attachEvent("onlosecapture", upHandler);
}
else { // IE 4 Event Model
// In IE 4 we can't use attachEvent( ) or setCapture( ), so we set
// event handlers directly on the document object and hope that the
// mouse events we need will bubble up.
var oldmovehandler = document.onmousemove; // used by upHandler( )
var olduphandler = document.onmouseup;
document.onmousemove = moveHandler;
document.onmouseup = upHandler;
}

// We've handled this event. Don't let anybody else see it.
if (event.stopPropagation) event.stopPropagation( ); // DOM Level 2
else event.cancelBubble = true; // IE

// Now prevent any default action.
if (event.preventDefault) event.preventDefault( ); // DOM Level 2
else event.returnValue = false; // IE

/**
* This is the handler that captures mousemove events when an element
* is being dragged. It is responsible for moving the element.
**/
function moveHandler(e) {
if (!e) e = window.event; // IE Event Model

// Move the element to the current mouse position, adjusted as
// necessary by the offset of the initial mouse-click.
elementToDrag.style.left = (e.clientX - deltaX) + "px";
elementToDrag.style.top = (e.clientY - deltaY) + "px";

// And don't let anyone else see this event.
if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2
else e.cancelBubble = true; // IE
}

/**
* This is the handler that captures the final mouseup event that
* occurs at the end of a drag.
**/
function upHandler(e) {
if (!e) e = window.event; // IE Event Model

// Unregister the capturing event handlers.
if (document.removeEventListener) { // DOM event model
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}
else if (document.detachEvent) { // IE 5+ Event Model
elementToDrag.detachEvent("onlosecapture", upHandler);
elementToDrag.detachEvent("onmouseup", upHandler);
elementToDrag.detachEvent("onmousemove", moveHandler);
elementToDrag.releaseCapture( );
}
else { // IE 4 Event Model
// Restore the original handlers, if any
document.onmouseup = olduphandler;
document.onmousemove = oldmovehandler;
}

// And don't let the event propagate any further.
if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2
else e.cancelBubble = true; // IE
}
}
sf0223cn 2007-10-11
  • 打赏
  • 举报
回复
帮顶了~
amingo 2007-10-11
  • 打赏
  • 举报
回复
帮LZ顶
hzmmars 2007-10-11
  • 打赏
  • 举报
回复
/*<层的拖动>*/
var ms=0;
function dragDiv(obj){
if(event.srcElement.type!='text')//选中TEXT控件 不拖动
{
ms=obj;
event.srcElement.setCapture();
x=document.all(ms).style.pixelLeft-event.x;
y=document.all(ms).style.pixelTop-event.y;
}
}

function document.onmousemove(){
if(ms){
document.all(ms).style.pixelLeft=x+event.x;
document.all(ms).style.pixelTop=y+event.y;
}
}

function document.onmouseup(){
if(ms){
event.srcElement.releaseCapture();
ms=0;
}
}
/*</层的拖动>*/



使用方法

<div id="div1" onmousedown="dragDiv('div1')" >aaaaaa</div>

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧