JQuery窗口拖动效果

2019独角兽企业重金招聘Python工程师标准>>>

JQuery代码

var _z=9999;
$(document).ready(function(){var _move=false;//移动标记var _x,_y;//鼠标离控件左上角的相对位置var wd;//窗口$(".window").click(function(){//alert("click");//点击（松开后触发）this.style.cursor = "default";//鼠标形状//this.style.zIndex = 999;}).mousedown(function(e){_move=true;wd=$(this);this.style.cursor = "move";//鼠标形状this.style.zIndex = _z;//窗口层次_z++;_x=e.pageX-(isNaN(parseInt(wd.css("left")))?0:parseInt(wd.css("left")));_y=e.pageY-(isNaN(parseInt(wd.css("top")))?0:parseInt(wd.css("top")));       /*  wd.fadeTo(20, 0.25); *///点击后开始拖动并透明显示$(document).mousemove(function(e){if(_move){var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置var y=e.pageY-_y;wd.css({top:y,left:x});//控件新位置}}).mouseup(function(){_move=false;/* wd.fadeTo("fast", 1); *///松开鼠标后停止移动并恢复成不透明});});});

Html代码

<style>.window{width:100px;height:100px;cursor:pointer;position: relative;left:100px;top:90px;background-color:#DCDCDC;border-radius: 7px;z-index: 1;border:1px solid black;padding:50px;}.body{padding:20px 30px 30px 30px;position:absolute;top:150px;left:50%;margin-left:-500px;width:940px;min-width:940px;background-color:#F8F8FF;border:1px solid #DCDCDC;border-bottom:5px solid #BA55D3;border-radius:3px;behavior:url(js/PIE.htc);}</style></head><body><div class="body"  ><div class="window"  title="点击拖动">全局拖动</div></div></body>

效果：http://oospace.sinaapp.com/1.php

使用方法：

1，给div添加class="window"即可

2，div要有一定的宽和高

实现原理：

未完待续。。。

转载于:https://my.oschina.net/oospace/blog/356565

JQuery窗口拖动效果相关推荐

jquery div拖动效果示例代码
jquery div拖动效果示例代码 div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过复制代码代码如下: <%@ ...
【javaScript】原生实现窗口拖动效果
窗口拖动通过原生javaScript进行窗口拖动的实现一.功能通过javaScript实现自定义容器的拖动操作,通过拖动标题部分进行窗口的移动二.实现思路通过鼠标左键按下触发条件通过eve ...
jquery实现拖动效果（代码+解释）
1.代码效果当鼠标点击目标区域并且移动可以实现在网页的窗口内移动,鼠标松开之后停止. 2.代码及解释详细解释在代码下部 <!DOCTYPE html> <html lang=&q ...
使用jQuery创建模态窗口登陆效果
来源:GBin1.com 在线下载在线演示隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素.社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看到的表单.在博 ...
jquery 设置元素拖动效果
jquery 设置页面元素可拖动效果使用: setEleDrag('.go_manager_vote',120,60,function(){ console.log('执行点击操作'); } ...
linux 拖动图标有拖影_想要实现元素拖动效果，但是一拖动出现禁止的图标
用jQuery实现可用鼠标创建窗口,用鼠标对窗口进行拖动. https://jsfiddle.net/r4x1toz3/7/ 但是有两个问题不知道怎么解决: 1.创建完元素,,文字会呈被选中状态,每创 ...
一行代码轻松实现拖动效果
写JS实现拖动需要一大堆不便维护的代码,实属麻烦,Google了大半天,发现了一个优秀的Jquery插件EasyDrag,只需要一行代码便可轻松在主流浏览器上实现拖动效果. $ ...
vc++ mfc中拖动效果的实现借助于CImageList
拖动是界面编程频繁使用的一个效果,在windows系统下可谓大行其道.纵观时下的应用软件几乎各个都支持各种各样拖动的效果,windows7更是把拖动做到了极致.其实说起来拖动的实现也很简单,对于有句柄 ...
JS各种各样的拖动效果
<html> <head><title>拖动效果函数演示 by Longbill.cn</title> <style> body { fon ...

JQuery窗口拖动效果

JQuery窗口拖动效果相关推荐

最新文章

热门文章