两个控件在同一行 25
2017-12-29 · 百度知道合伙人官方认证企业
育知同创教育
[javascript] view plain copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Draggable拖动组件</title>
<script src="jquery-1.11.2.js" type="text/javascript"></script>
<script src="jquery.easyui.min.js" type="text/javascript"></script>
<script src="easyui-lang-zh_CN.js" type="text/javascript"></script>
<link href="easyui.css" rel="stylesheet" type="text/css" />
<link href="icon.css" rel="stylesheet" type="text/css" />
<style type="text/css">
div{ width:200px; height:150px; background:Orange; margin:20px}
</style>
<script type="text/javascript">
$(function () {
$("#box1").draggable(); //如果你这样写的话，默认这个#box1是可以拖动的
//但是draggable这个组件还有属性。下面我们来看看
//revert 有两个值，false 和true 如果设为true，则拖动停止时返回起始位置。否则不返回
//cursor 是表示拖动时候，说鼠标的样式。text表示 拖动#box2的时候鼠标是 I 这个样子的
$("#box2").draggable({ revert: true, cursor: 'text' });
//handle 是表示只有你把鼠标移动#pox这个组件那里才能拖动。即：只能拖动#box3里面的#pox控件时，才能拖动这个#box3
$("#box3").draggable({ handle: '#pox' });
//disabled 表示这个#box4不能拖动。它有两个值false 和true表示不能拖动，false能拖动
$("#box4").draggable({ disabled: true });
//edge 表示可以拖动#box5这个控件的位置 设为0的时候表示 只有将鼠标移动到#box5上都可以拖动
//设为10，表示包裹在#box5控件四周10px宽度，即便鼠标移动过去进行拖动也是不能拖动的
//设为20，表示包裹在#box5控件四周20px宽度，即便鼠标移动过去进行拖动也是不能拖动的，以此类推。这个数值是可以随便设的。
$("#box5").draggable({ edge: 0 });
//axis 表示#box6 这个控件只能垂直（上下）拖动，不能水平拖动
$("#box6").draggable({ axis: 'v' });
//axis 表示#box6 这个控件只能水平拖动,不能垂直（上下）拖动
$("#box7").draggable({ axis: 'h' });
//proxy 表示在准备拖动#box8元素的时候，克隆一个#box8的元素来进行拖动，这个拖动的过程，#box8元素不懂，我们就只看到#box8的克隆元素(影子)在拖动，当这个克隆元素拖动停止后，连个#box8这个元素就马上移动到这个克隆元素的位置来了。其实页面只有这个#box8元素，这个克隆元素只不过是在拖动的时候#box8元素的影子而已。（其实就是一个影子的视觉效果）
$("#box8").draggable({ proxy: 'clone' });
//proxy: 'clone' 还可以配合deltaX ，deltaY使用，deltaX ，deltaY表示在拖动元素的时候，鼠标的位置是在 元素的具体位置，就X,Y坐标
//$("#box8").draggable({ proxy: 'clone', deltax: 50, deltay: 50 });
$("#box9").draggable({
proxy: function (source) { //其实这个source就是 “#box9”这个元素本身
/*
//这个s 一个jquery对象 一个动态的div
var s = $('<div id="dd" style="width:40px;height:20px; border:1px solid Red"></div>');
s.appendTo("body"); //将这个div添加到body元素中。注意：前面已经说了 这个proxy仅仅是一个影子效果。所以不会真正有s这个元素。这个s元素同样也是 在拖动过程中的影子而已，只是这个影子与#box9长的不一样，它是#dd这个样子的
return s; //返回 s
*/
var s = $('<div style="width:40px;height:20px; border:1px solid Red"></div>');
s.html($(source).html()).appendTo("body"); //$(source).html()即$("#box8").html();
return s;
}
})
//==========================以上是拖动组件的属性。下面是事件
$("#box10").draggable({
onBeforeDrag: function (e) {
//return false 如果返回false表示不能再拖动了。一般用在一些逻辑判断的时候。如在某些情况下不能拖动。等等。
alert("拖动之前触发");
}
})
$("#box10").draggable({
onStartDrag: function (e) {
alert("拖动开始触发")
}
})
$("#box10").draggable({ //不能乱用，只要移动每一个像素点都会触发。
onDrag: function (e) {
alert("拖动过程中触发，不能拖动时返回false")
}
})
$("#box10").draggable({
onStopDrag: function (e) {
alert("拖动停止后触发");
}
})
//==========================以上是拖动组件的事件， 下面是拖动组件的方法
$("#box11").draggable("disable"); //将#box11设置禁止拖动。用在的场合就是在某个逻辑判断后，将它设为禁止拖动
$("#box11").draggable("enable"); //将#box11设为可以拖动，与disable是相对应的。
//可以查看#box11组件的属性值
console.log($("#box11").draggable("options")); //打开火狐，firebug-(控制台-ALL) 或者DOM
})
</script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"><span id="pox">我是内容部分</span></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
<div id="box9">内容</div>
<div id="box10">内容2</div>
<div id="box11">内容3</div>
</body>
</html>
