两个可推动DIV的代码例子及演示 - div吧

level 1

xroha 楼主

例一：纯JS代码

源代码：

Test

html,body { height:100%;width:100%;padding:0;margin:0; }
.dialog { width:250px;height:250px; position:absolute;background-color:#ccc;-webkit-box-shadow:1px 1px 3px #292929;-moz-box-shadow:1px 1px 3px #292929;box-shadow:1px 1px 3px #292929;margin:10px;}
.dialog-title {color:<a href="https://tieba.baidu.com/mo/q/hotMessage?topic_id=0&fid=2443095&topic_name=fff;background-color:&is_video_topic=0">#fff;background-color:#</a>404040;font-size:12pt;font-weight:bold;padding:4px 6px;cursor:move; }
.dialog-content {padding:4px; }

Dialog

This is a draggable test.

var Dragging=function(validateHandler){ //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null
var draggingObj=null; //dragging Dialog
var diffX=0;
var diffY=0;
function mouseHandler(e){
switch(e.type){
case *mousedown*:
draggingObj=validateHandler(e);//验证是否为可点击移动区域
if(draggingObj!=null){
diffX=e.clientX-draggingObj.offsetLeft;
diffY=e.clientY-draggingObj.offsetTop;
}
break;
case *mousemove*:
if(draggingObj){
draggingObj.style.left=(e.clientX-diffX)+*px*;
draggingObj.style.top=(e.clientY-diffY)+*px*;
}
break;
case *mouseup*:
draggingObj =null;
diffX=0;
diffY=0;
break;
}
};
return {
enable:function(){
document.addEventListener(*mousedown*,mouseHandler);
document.addEventListener(*mousemove*,mouseHandler);
document.addEventListener(*mouseup*,mouseHandler);
},
disable:function(){
document.removeEventListener(*mousedown*,mouseHandler);
document.removeEventListener(*mousemove*,mouseHandler);
document.removeEventListener(*mouseup*,mouseHandler);
}
}
}
function getDraggingDialog(e){
var target=e.target;
while(target && target.className.indexOf(*dialog-title*)==-1){
target=target.offsetParent;
}
if(target!=null){
return target.offsetParent;
}else{
return null;
}
}
Dragging(getDraggingDialog).enable();

演示：http://www.luocen.net/demo.html

2014年09月24日 01点09分 1

level 1

xroha 楼主

例二：利用的jquery插件
效果图：

源代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
在线演示：http://www.luocen.net/demo2.html

2014年09月24日 01点09分 2

level 10

lini450037632

手机签到经验+8点，回三个帖经验+12点，整个过程不到5分钟，每天可增加经验18点。理论上来说，你回再多帖子，经验也不会增长了～单纯从捞经验考虑，这是最经济的泡吧方式了……我是来水经验的，顺带混个眼熟

2014年10月12日 11点10分 3

level 1

Don_tLie

2014年12月01日 06点12分 4