当前位置: 代码迷 >> ASP.NET >> 类似这种可以拖拽的如何做
  详细解决方案

类似这种可以拖拽的如何做

热度:3390   发布时间:2013-02-25 00:00:00.0
类似这种可以拖拽的怎么做
类似如下连接的: 
http://go.news.163.com/zhufu/gdzg_zhufu.jsp

有源码推荐的给高分.
有思路的纪念分.
谢谢了

------解决方案--------------------------------------------------------
工具箱中的WebParts部分貌似可以这样
msn主页好像是可以这样的
------解决方案--------------------------------------------------------
不过介绍这方面的东西实在不多,
------解决方案--------------------------------------------------------
貌似 webParts 是干这个用的,没有研究过 google也有这样的技术
------解决方案--------------------------------------------------------
1,AjaxToolKit中的RecorderList控件可以实现拖拽


2,JavaScript
类似代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0080)http://www.pconline.com.cn/pcedu/empolder/wz/javascript/0607/other/srcode05 -->
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT>
var iMouseDown = false;
var dragObject = null;
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}


// Demo 0 variables
var DragDrops = [];
var curTarget = null;
var lastTarget = null;



function makeDraggable(item){
if(!item) return;
item.onmousedown = function(ev){
dragObject = this;
mouseOffset = getMouseOffset(this, ev);
return false;
}
}

function getMouseOffset(target, ev){
ev = ev || window.event;

var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
e = e.offsetParent;
}

left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

return {x:left, y:top};

}

function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}

function mouseDown(ev){
ev = ev || window.event;
var target = ev.target || ev.srcElement;

if(target.onmousedown || target.getAttribute('DragObj')){
return false;
}
}

function mouseUp(ev){

//dragObject = null;

if(dragObject){
ev = ev || window.event;
var mousePos = mouseCoords(ev);

var dT = dragObject.getAttribute('droptarget');
if(dT){
var targObj = document.getElementById(dT);
var objPos = getPosition(targObj);
if((mousePos.x > objPos.x) && (mousePos.y > objPos.y) 
&& (mousePos.x<(objPos.x+parseInt(targObj.offsetWidth)))
 && (mousePos.y<(objPos.y+parseInt(targObj.offsetHeight)))){
var nSrc = targObj.getAttribute('newSrc');
if(nSrc){
dragObject.src = nSrc;
setTimeout(function(){
if(!dragObject || !dragObject.parentNode) return;
dragObject.parentNode.removeChild(dragObject);
dragObject = null;
}, parseInt(targObj.getAttribute('timeout')));
} else {
dragObject.parentNode.removeChild(dragObject);
}
}
}
}
dragObject = null;

iMouseDown = false;
}


function mouseMove(ev){
ev = ev || window.event;
  相关解决方案