jQuery+ui自由拖动浮动层

本文以便签条的前端模板作为示例，实现随意拖动浮动层，并获取拖动位置。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线充值

分类：悬浮层/弹出层 > 拖动难易：中级

查看演示

加我微信，拉你进VIP群学习：

下载资源下载积分： 30 积分

HTML

首先我们放置三个浮动层：

<div class="note blue ui-draggable" style="left: 232px; top: 152px; z-index: 6585; opacity: 1;"> 
   <span class="data">1.</span> 网站模板 
  </div> 
  <div class="note yellow ui-draggable" style="left: 409px; top: -21px; z-index: 6584; opacity: 1;"> 
   <span class="data">2.</span> 素材火 
  </div> 
  <div class="note green ui-draggable" style="left: 587px; top: 155px; z-index: 6586; opacity: 1;"> 
   <span class="data">3.</span> 网页特效 
</div>

接着调用jquery ui插件：

<script type='text/javascript' src='js/jquery-ui.min.js'></script>

jQuery

最后我们在$(function()里定义了一个变量tmp，通过判断每个div.note的z-index值，保证拖动时，该DIV在最上层（即z-index为最大值），就是不会被别的层覆盖。

$(function() {
    var tmp;
    $('.note').each(function() {
        tmp = $(this).css('z-index');
        if (tmp > zIndex) zIndex = tmp;
    }) make_draggable($('.note'));
});

var zIndex = 0;
function make_draggable(elements) {
    elements.draggable({
        opacity: 0.8,
        containment: 'parent',
        start: function(e, ui) {
            ui.helper.css('z-index', ++zIndex);
        },
        stop: function(e, ui) {
            //                        $.get('ajax.php', {
            //                            x: ui.position.left,
            //                            y: ui.position.top,
            //                            z: zIndex,
            //                            id: parseInt(ui.helper.find('span.data').html())
            //                        });
        }
    });
}

看完本文后，你是不是会想到拖动保存更多实际的应用呢，本站在接下来的文章会通过贴便签的实例来讲解拖动保存的应用，敬请关注。

参数	描述	默认值
axis	约束拖动的动作只能在X轴或Y轴上执行，可选值：'x', 'y'。初始：$('.selector').draggable({ axis: 'x' }); 获取：var axis = $('.selector').draggable('option', 'axis'); 设置：$('.selector').draggable('option', 'axis', 'x');	false
cancel	防止在指定的对象上开始拖动。初始：$('.selector').draggable({ cancel: 'button' }); 获取：var cancel = $('.selector').draggable('option', 'cancel'); 设置：$('.selector').draggable('option', 'cancel', 'button');	':input,option'
connectToSortable	允许draggable被拖拽到指定的sortables中，如果使用此选项helper属性必须设置成clone才能正常工作。	false
containment	强制draggable只允许在指定元素或区域的范围内移动，可选值：'parent', 'document', 'window', [x1, y1, x2, y2].	false
cursor	指定在做拖拽动作时，鼠标的CSS样式。初始：$('.selector').draggable({ cursor: 'crosshair' });	auto
cursorAt	当开始移动时，鼠标定位在的某个位置上（最多两个方向）。可选值：{ top, left, right, bottom }. 初始：$('.selector').draggable({ cursorAt: { left: 5 } });	false
delay	当鼠标点下后，延迟指定时间后才开始激活拖拽动作（单位：毫秒）。此选项可以用来防止不想要的拖累元素时的误点击。初始：$('.selector').draggable({ delay: 500 });	0
distance	当鼠标点下后，只有移动指定像素后才开始激活拖拽动作。初始：$('.selector').draggable({ distance: 30 });	1
grid	拖拽元素时，只能以指定大小的方格进行拖动。可选值：[x,y] 初始：$('.selector').draggable({ grid: [50, 20] });	false
handle	限制只能在拖拽元素内的指定元素开始拖拽。	false
helper	拖拽元素时的显示方式。（如果是函数，必须返回值是一个DOM元素）可选值：'original', 'clone', Function 初始：$('.selector').draggable({ helper: 'clone' });	Function : 'original'
iframeFix	可防止当mouseover事件触发拖拽动作时，移动过iframes并捕获到它（内部内容），如果设置成true，则屏蔽层会覆盖页面的iframe。如果设置成对应的选择器，则屏蔽层会覆盖相匹配的iframe。初始：$('.selector').draggable({ iframeFix: true });	false
opacity	当元素开始拖拽时，改变元素的透明度。初始：$('.selector').draggable({ opacity: 0.35 });	false
refreshPositions	如果设置成true，所有移动过程中的坐标都会被记录。（注意：此功能将影响性能）初始：$('.selector').draggable({ refreshPositions: true });	false
revert	当元素拖拽结束后，元素回到原来的位置。初始：$('.selector').draggable({ revert: true });	false
revertDuration	当元素拖拽结束后，元素回到原来的位置的时间。（单位：毫秒）初始：$('.selector').draggable({ revertDuration: 1000 });	500
scope	设置元素只允许拖拽到具有相同scope值的元素。初始：$('.selector').draggable({ scope: 'tasks' });	default
scroll	如果设置为true，元素拖拽至边缘时，父容器将自动滚动。初始：$('.selector').draggable({ scroll: false });	true
scrollSensitivity	当元素拖拽至边缘时，父窗口一次滚动的像素。	20
scrollSpeed	当元素拖拽至边缘时，父窗口滚动的速度。	20
snap	当设置为true或元素标签时，元素拖动到其它元素的边缘时，会自动吸附其它元素。初始：$('.selector').draggable({ snap: 'span' });	false
snapMode	确定拖拽的元素吸附的模式。可选值：'inner', 'outer', 'both' 初始：$('.selector').draggable({ snapMode: 'outer' });	both
snapTolerance	确定拖拽的元素移动至其它元素多少像素的距离时，发生吸附的动作。初始：$('.selector').draggable({ snapTolerance: 40 });	20
zIndex	控制当拖拽元素时，改变元素的z-index值。初始：$('.selector').draggable({ zIndex: 2700 });	false
start	当鼠标开始拖拽时，触发此事件。	初始：$('.selector').draggable({ start: function(event, ui){...} }); 绑定：$('.selector').bind('dragstart', function(event, ui){...});
drag	当鼠标拖拽移动时，触发此事件。	初始：$('.selector').draggable({ drag: function(event, ui){...} });
stop	当鼠标松开时，触发此事件。	初始：$('.selector').draggable({ stop: function(event, ui){...} });
destory	从元素中移除拖拽功能。	用法：.draggable( 'destroy' )
disable	禁用元素的拖拽功能。	用法：.draggable( 'disable' )
enable	启用元素的拖拽功能。	用法：.draggable( 'enable' )
option	获取或设置元素的参数。	用法：.draggable( 'option' , optionName , [value]

jQuery+ui自由拖动浮动层 收藏

HTML

jQuery

jQuery+ui自由拖动浮动层
收藏