最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

jQuery+ui自由拖动浮动层

来源:http://www.erdangjiade.com/ 二当家的 2015-04-23 07:35浏览(1589)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery+ui自由拖动浮动层
分类:悬浮层/弹出层 > 拖动 难易:中级
查看演示 下载资源: 109

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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]
标签: 拖动jqueryui
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/68.html
评论0
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

1 2