网站地图
【www.gdgbn.com--jquery】
<%@ page language="c#" autoeventwireup="true" codebehind="default.asp教程x.cs" inherits="jquerydrag._default" %>
<script type="text/网页特效" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/draggable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//拖拽方法
$("#imgdrag").draggable({
//拖拽范围
containment: "#dragarea",
//开始事件
start: function(event, ui) {
startdrag(event, ui);
},
//结束事件
stop: function(event, ui) {
enddrag(event, ui);
}
})
});
//开始事件方法
function startdrag(event, ui) {
$("#startdraginfo").html("开始： 左：" + ui.offset.left + "上：" + ui.offset.top);
}
//结束事件方法
function enddrag(event, ui) {
$("#enddraginfo").html("结束： 左：" + ui.offset.left + "上：" + ui.offset.top);
}
</script>
下面总结一下
一个基于jquery的拖放插件，易于使用，所有的操作均通过调用draggable进行。
基本用法：
$("#dd").draggable();
$("#dd").draggable({handle:"#title"});
停止拖放：$("#dd").draggable({disabled:true});
恢复拖放：$("#dd").draggable({disabled:false});
draggable拖动是jq ui 的第一个例子。今天学习了下，由于英文阅读能力有限 有些属性没弄明白，以后补充。
初始化框架，引用对应ui库文件
javascript代码
css教程" href="../development-bundle/themes/ui-lightness/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery-1.3.2.min.js""></script>
<script type="text/javascript" src="../development-bundle/ui/ui.core.js"></script>
<script type="text/javascript" src="../development-bundle/ui/ui.draggable.js"></script>
dom加载完以后执行绑定。
xml/html代码
<script type="text/javascript">
$(function() {
$("#draggable").draggable();
});
</script>
现在基本的拖拽已经可以实现了。 只要你在页面创建一个 以 #draggable命名的标签就ok了
draggable方法有很多参数，今天我瞎摸弄明白了一下几个：
addclasses:
如果设置成false,将不添加ui-draggable这个class.当调用 .draggable() 初始化上百个元素时,可以优化性能（【王子很坏】提供翻译）
appendto :
进行拖拽时,被传递或被appendto选项选择的元素将被当做draggable helper的容器,默认情况下,helper被追加到那个draggable元素相同的容器中（（【王子很坏】提供翻译 , 这个属性我测试没成功。研究中）
axis:
拖拽动作只在 对应的轴向上移动。 参数x 或 y
cancel :
当拖拽对象是cancel说设置的标签或者对象时候，拖拽无效
containment:
限制拖拽对象在参数设置区域，参数可以为 标签 对象 或者 是[x1,y2,x2,y2]的像素区域
cursor:
设置 拖拽动作鼠标样式
cursorat:
设置拖拽动作发生鼠标所在位置 参数为 { cursorat: { left: 5 } }
delay:
拖拽动作延迟多少毫秒后响应 参数 毫秒
distance:
拖拽动作离开拖拽对象 一定像素以后 拖拽发生 参数数值
grid :
拖拽动作发生后 造成 对其网格效果， 其效果是每次移动 固定像素距离，参数为 [20, 20]
handle:
设置拖拽对象里面可实现拖拽动作的对象。参数是选择器 类似于浏览器一样，只能通过顶部蓝色条拖拽，但是拖动的是整个浏览器。
helper :
拖拽动作发生时 原始对象不动，复制一个对象给拖拽事件 对象在拖拽结束后是否保存在结束位置取决于参数 "original", "clone", function. 参数为function的时候不许返回一个 dom标签。
iframefix :
防止应为iframes 的存在导致拖拽在中途丢失
opacity :
设置拖拽时的透明度 参数浮点型 1.00-0.00 拖拽结束后 透明度回复初始状态
scroll :
设置拖动对象被拖动时，是否允许拖出前容器（浏览器）显示区域（也就是说触不发auto-scrolls *关于auto-scrolls请看后面的解释*）。设置为false ，拖动对象碰到边框的时候容器窗口不会随着碰撞移动主体窗口。 注意，这个经过我测试，设置为false 一样会产生滚动条。
scrollsensitivity :
设置拖拽对象被拖拽时与容器发生碰撞的响应距离。貌似这样解释不好理解，通俗的说，就是当你碰到边框的多少像素范围内就发生auto-scrolls事件。
scrollspeed:
当拖拽对象和浏览器边发生碰撞时，容器每次移动主体窗口的距离。
revert :
设置拖拽事件执行完毕后拖拽是否生效，如果不生效那么将以动画方式返回到拖拽对象初始化位置。参数为逻辑值或者字符串"valid", "invalid"
revertduration :
在revert事件执行时候，设置以动画返回初始化位置的速度。参数为 数值毫秒。在没有设置revert的情况下 改属性没意义。
snap:
拖拽对象设置该属性以后，在2个拖拽对象即将发生接触时，拖拽对象会自动吸附到相互的边上。类似于磁铁效果或者ps教程里面的对齐参考。参数为逻辑值， 只有2个或者2个以上对象设置了该属性才能相互发生作用。
snapmode :
拖拽对象相互之间的吸附模式。参数为"inner", "outer", "both"。 默认值是both。
snaptolerance:
拖拽对象相互之间发生吸附模式的作用范围，可以理解为 磁铁的磁力， 参数为 像素单位。
stack :
当你有多个拖拽对象的时候，你可以使用此参数把他们设置为一个组，然后在这个参数里面有可以定义最小z轴，这些拖拽对象，将不再按照原始z轴层叠，而是按照最后点击循序来层叠。类似于windows多个文件夹窗口一样的层叠。 参数方式{ stack: { group: "div", min: 50 }}。
zindex 拖动事件触发时候 z轴改成对应参数，拖拽结束，z轴还原。
注：【aoto-scroll 是自动滚动，也就是说 拖拽对象在碰撞到边框的时候，容器（浏览器）滚动条会自动延伸滚动条 并且屏幕像碰撞方向偏移~】
事件：
拖拽有3个事件，和4个参数 详情可以直接看官方aip那些不用详细说明。
基本参数写法
javascript代码
$("#draggable").draggable({ opacity: 0.35 });
如何获取参数？
组件提供get和set方法来获取和设置参数。
以上面设置透明度为例：
javascript代码
//getter
var opacity = $(".selector").draggable("option", "opacity");
//setter
$(".selector").draggable("option", "opacity", 0.35);
根据上面的说明我们再来一个实例
function($) {
$.fn.draggable = function(opts) {
//默认参数设置
var defaultsettings = {
parent: document, //父级容器
target: this, //拖拽时移动的对象
onmove: function(e) { //拖拽处理函数
$(settings.target).css({
left: e.clientx - dx,
top: e.clienty - dy
});
},
onfinish: function(){} //拖拽完成回调函数
};var settings = $.extend({}, defaultsettings, opts);
var dx, dy, moveout;
//防止拖拽时选中文本
this.bind("selectstart", function(){return false;});//鼠标按下时记录鼠标相对位置
this.mousedown(function(e) {
var t = $(settings.target);
dx = e.clientx - parseint(t.css("left"));
dy = e.clienty - parseint(t.css("top"));$(settings.parent).mousemove(move).mouseo教程ut(out);
$().mouseup(up);
});//鼠标在父级容器上移动时的处理
function move(e) {
moveout = false;
settings.onmove(e);
}//鼠标移出父级容器时的处理
function out(e) {
moveout = true;
settimeout(function(){checkout(e);}, 100); //微调
}//拖拽结束
function up(e) {
$(settings.parent).unbind("mousemove", move).unbind("mouseout", out);
$().unbind("mouseup", up);
settings.onfinish(e);
}function checkout(e) {
moveout && up(e);
}
};
})(jquery);
调用方法
<script type="text/javascript">
$(function() {
$("#k2").draggable();
});
</script>
111
222