菜单

jquery网页元素拖拽插件效果及实现,Jquery实现自定义窗口随意的拖拽

2019年8月2日 - 前端排行

图片 1

在网页上我们经常看到,当点击一个按钮时,弹出一个自定义窗口,并且可以随意的拖拽,从而改变其位置

复制代码 代码如下:

使用jquery实现拖拽,则必须要jquery的文件了,实现步骤:

;(function($){
$.fn.extend({
“jlzindex” : function(){ //用于判断和设置各个对话框的z-index
var $dragindex = $(this);
var arrzindex = new array();
for(var i=0; i < $dragindex.length; i++){
//初始化数组元素值,并按拖拽项顺序设置z-index值
var zidxnum = 10000 – i – i -2;
arrzindex[i] = {“getid”:”drag” + ($dragindex.length –
i),”zidx”:zidxnum};
$(“#drag” + ($dragindex.length – i)).css(“z-index”,zidxnum);
}
$dragindex.mousedown(function(){
var i = 0;
var dindex = 0;
while(arrzindex[i]){ //找到当前点击项在数组里的下标
if(arrzindex[i].getid == $(this).attr(“id”)){ dindex = i;}
i++;
}
for(var i = dindex; i >=0; i–){
//把点击项移至数组第一位,其他项后移
if(i > 0){
arrzindex[i].getid = arrzindex[i-1].getid;
$(“#” + arrzindex[i].getid).css(“z-index”,arrzindex[i].zidx);
} else{
arrzindex[i].getid = $(this).attr(“id”);
$(“#” + arrzindex[i].getid).css(“z-index”,arrzindex[i].zidx);
}
}
});
},
“jldraggable” : function(mod){ //拖拽插件
var model = mod;
var draggable = false;
var $drag = $(this);
$drag.find(“.dragbar”).mousedown(function(e){
draggable = true;
var mouseleft = e.pagex – $drag.find(“.dragbar”).offset().left;
//鼠标在拖拽区域中的横向距离
var mousetop = e.pagey – $drag.find(“.dragbar”).offset().top;
//鼠标在拖拽区域中的横向距离
if(model == “cfade”){ //原位置元素半透明
$drag.clone(false).appendto(“body”).addclass(“dragshadow”).fadeto(0,0.2).css(“z-index”,parseint($drag.css(“z-index”))

1、引入jquery文件

2、编写js脚本

index.html:

具体代码:

复制代码 代码如下:

html代码:

<script type=”text/javascript”
src=”js/jquery.min.js”></script>
<script type=”text/javascript”
src=”js/jquery.jldraggable.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#drag1”).jldraggable(); //无参数,没有影子
$(“#drag2”).jldraggable(“cfade”); //cfade,定义原位置半透明阴影
$(“#drag3”).jldraggable(“dfade”); //dfade,定义跟随鼠标的半透明阴影
$(“.dragindex”).jlzindex(); //多个窗口的z-index处理
});
</script>
<style type=”text/css”>
.dragtitle{
width:120px;
height:27px;
background:url(images/drag_01.jpg);
cursor:move;
}
.dragcontent{
width:120px;
height:73px;
background:url(images/drag_02.jpg);
line-height:73px;
text-align:center;
}
#drag1{
width:120px;
position:absolute;
left:10px;
top:10px;
}
#drag2{
width:120px;
position:absolute;
left:90px;
top:90px;
}
#drag3{
width:120px;
position:absolute;
left:170px;
top:170px;
}
</style>
<div id=”drag1″ class=”dragindex”>
<div class=”dragbar dragtitle”></div>
<div class=”dragcontent”>无参数</div>
</div>
<div id=”drag2″ class=”dragindex”>
<div class=”dragbar dragtitle”></div>
<div class=”dragcontent”>原位半透明</div>
</div>
<div id=”drag3″ class=”dragindex”>
<div class=”dragbar dragtitle”></div>
<div class=”dragcontent”>拖拽半透明</div>
</div>

复制代码 代码如下:

您可能感兴趣的文章:

<button id=”show”>显示</button>
<div class=”win”>
<div class=”wTop”><p style=”float:right;margin:5px 5px 0px
0px;color:white” id=”hidden”>X</p></div>
<div class=”content”></div>
</div>

css样式:

复制代码 代码如下:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图