基于jquery的拖动布局插件
(function($){
$.fn.lsMovePanel=function(){
var id=this.attr("id");
var X=Y=0;
var offsetX=offsetY=0;//绝对位置
var OldIndex=0;///存储原始索引
var Temp_Li="<li id=\"Temp_Li\" style=\"background-color:#FFFFFF;border-color:#FF023C\"></li>";
var Move_obj;///当前拖动的对象
$("#"+id+" li").each(function(i){
$(this).attr("open","0");
//鼠标点击
$(this).bind("mousedown",function(){
if(event.button==1 || event.button==0){$(this).attr("open","1");}
if($(this).attr("open")=="1"){
$(this).css({
cursor:"move",
opacity:"0.7"
});
X=event.clientX;
Y=event.clientY;
offsetX=$(this).offset().left;
offsetY=$(this).offset().top;
OldIndex=$(this).index();
$(this).css({
position:"absolute",
left:offsetX,
top:offsetY
});
$("#"+id+" li").each(function(i){
if(i==OldIndex){
$(this).after(Temp_Li);
}
})
}
});
//鼠标放开
$(this).bind("mouseup",function(){
if(event.button==1 || event.button==0){$(this).attr("open","0");}
if($(this).attr("open")=="0"){
$("#Temp_Li").before($(this));
$(this).animate({
left:$("#Temp_Li").offset().left,
top:$("#Temp_Li").offset().top,
},300,function(){
$("#Temp_Li").remove();
$(this).css({
cursor:"default",
opacity:"1",
position:"static"
});
});
$("#"+id+" li").each(function(i){
$(this).css({
"border-color":"#666666"
});
});
}
});
//移动
$(this).bind("mousemove",function(){
if($(this).attr("open")=="1"){
var current_X=current_Y=0;
current_X=offsetX+event.clientX-X;
current_Y=offsetY+event.clientY-Y;
$(this).css({
position:"absolute",
left:current_X,
top:current_Y
});
Move_obj=this;
$("#"+id+" li").each(function(i){
if(i!=OldIndex && $(this).attr("id")!="Temp_Li"){
var Deviation=0;
var Max_X=$(this).offset().left+$(this).width()-Deviation;
var Min_X=$(this).offset().left+Deviation;
var Max_Y=$(this).offset().top+$(this).height()-Deviation;
var Min_Y=$(this).offset().top+Deviation;
if((event.clientX < Max_X) && (event.clientY+$(Move_obj).height() > Max_Y) && (event.clientY+$(Move_obj).height() > Min_Y) && (event.clientX > Min_X) && (event.clientY < Max_Y) ){
$(this).css({
"border-color":"#FF7578"
});
//判断覆盖对象索引值在前还是后
if(OldIndex>$(this).index()){
$("#Temp_Li").before($(this));
$("#Temp_Li").remove();
$(this).before(Temp_Li);
}else{
$("#Temp_Li").after($(this));
$("#Temp_Li").remove();
$(this).after(Temp_Li);
}
}else{
$(this).css({
"border-color":"#666666"
});
}
}
})
}
});
});
}
})(jQuery);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title></title>
<style>
#Panel{
width:630px;
height:auto;
padding:0px;
}
#Panel li{
float:left;
list-style:none;
width:300px;
height:100px;
margin:5px;
background-color:#D9F1FF;
border:1px dotted #666666;
text-align:center; position:static;
}
*{
font-size:12px;
}
</style>
</head>
<script src="http://demo.jb51.net/jslib/jquery/jquery-1.4.2.min.js"></script>
<script src="http://demo.jb51.net/jslib/lsMovePanel.js"></script>
<body>
<div style="margin-left:100px;">
<ul id="Panel">
<li style="background-color:#3399FF"></li>
<li style="background-color:#00CCFF"></li>
<li style="background-color:#CC9900"></li>
<li style="background-color:#FF6600"></li>
<li style="background-color:#FFCC99"></li>
</ul>
</div>
<script>
$("#Panel").lsMovePanel();
</script>
</body>
</html>
相关推荐
-
jQuery 拖动层(在可视区域范围内)
复制代码 代码如下: (function($){ $.fn.extend({ mydrag:function(){ var boxX = 0; //元素在页面中的横坐标 var boxY = 0; //元素在页面中的纵坐标 var dMouseX = 0; //按下鼠标时的鼠标所在位置的横坐标 var dMouseY = 0; //按下鼠标时的鼠标所在位置的纵坐标 var mMouseX = 0; //移动鼠标时的鼠标所在位置的横坐标 var mMouseY = 0; //移动鼠标时的鼠标所在位
-
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
想拖动页面上的层,完全可以用jQuery ui的Draggable方法来实现,那如何将拖动后层的位置保存下来呢?本文将给出答案.本文讲解了如何采用PHP+MySQL+jQuery,实现随意拖动层并即时保存拖动位置. 本文原理就是通过拖动将拖动后层的相对位置left,top和z-index三个参数更新到数据表中对应的记录,页面通过CSS解析每个层不同的位置.请看具体实现步骤. 准备MySQL数据表 首先需要准备一张表notes,用来记录层的内容,背景色和坐标等信息. CREATE TABLE IF
-
使用jQuery的easydrag插件实现可拖动的DIV弹出框
EasyDrag 是一个用来实现页面元素拖拉的 jQuery 插件. 在没遇到easydrag插件之前,想实现一个弹出框并不是一件轻而易举的事情! 人们常说没有不劳而获的事情,但在编码的世界中却不是这样.更多的开源框架方面了我们,也毒害了我们! 废话少说,先看效果: 全部代码: <!DOCTYPE HTML> <html> <head> <title>easydrag实现可拖动的DIV弹出框</title> <style> /* 重置
-
PHP+jQuery实现随意拖动层并即时保存拖动位置
想拖动页面上的层,完全可以用jQuery ui的Draggable方法来实现,那如何将拖动后层的位置保存下来呢?本文将给出答案.本文讲解了如何采用PHP+MySQL+jQuery,实现随意拖动层并即时保存拖动位置. 之前我有文章:,文中以项目为示例,讲解了实现拖动布局的方法.本文与之不同之处在于可以任意拖动页面位置,原理就是通过拖动将拖动后层的相对位置left,top和z-index三个参数更新到数据表中对应的记录,页面通过CSS解析每个层不同的位置.请看具体实现步骤. 准备MySQL数据表 首
-
jquery拖动层效果插件用法实例分析(附demo源码)
本文实例讲述了jquery拖动层效果插件用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="l
-
jquery拖动插件(jquery.drag)使用介绍
复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery Dynamic Drag'n Drop</title> <script type="te
-
jQuery插件slider实现拖动滑块选取价格范围
在一些产品报价网站上,需要给出一系列价格范围供用户筛选,我们在筛选的范围之外再加一个自定义价格范围,这样为用户多提供了一种选择方式.本文将使用jQuery插件结合CSS实现使用滑块滑动的方式选择价格范围,请看本文讲解. jQuery ui 有个slider插件,就是一个非常好使的拖动滑块插件.要想实现滑块拖动,需要在页面head间先载入如下js. <script type="text/javascript" src="js/jquery.js"><
-
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
本教程向您展示如何使 HTML 元素可拖动,在本例中,我们将创建三个 DIV 元素然后启用他们的拖动和放置. 首先,我们创建三个<div> 元素: <div id="dd1" class="dd-demo"></div> <div id="dd2" class="dd-demo"></div> <div id="dd3" class=&quo
-
基于jquery的拖动布局插件
复制代码 代码如下: (function($){ $.fn.lsMovePanel=function(){ var id=this.attr("id"); var X=Y=0; var offsetX=offsetY=0;//绝对位置 var OldIndex=0;///存储原始索引 var Temp_Li="<li id=\"Temp_Li\" style=\"background-color:#FFFFFF;border-color:#
-
基于jQuery的消息提示插件 DivAlert之旅（二）
改进的代码部分主要如下: 1.创建default.css文件: 代码 复制代码 代码如下: img { vertical-align:middle; } .jBg { position: absolute; top: 0; left: 0; z-index: 9999; background-color: #999; filter: alpha(opacity=70); opacity: 0.7; } .jWrap { position: absolute; border: 1px solid
-
基于jQuery的消息提示插件之旅 DivAlert(三)
本版本遵循了2.0的写法,此处通过extend方法封装了需要设置的各个选项,比起2.0版本的代码要精简了一些. 2.0版本 复制代码 代码如下: //设置插件基本信息 var options = o || {}; options.width = o.width || 300; //提示框宽度若小于104px则自动重置为200px if (options.height > 104) { options.height = o.height; } else { options.height = 200
-
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式(可做屏保) 支持缩略图 支持标题显示 支持多种自定义事件 Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用. 二.下载 纯JS版本: 下载地址:https://github.com/fengyuanchen/
-
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换.借助流行的 jQuery 框架,只需很少的代码就可以实现精美的手风琴效果,帮助你的网站吸引更多用户的眼球. Elegant Accordion with jQuery and CSS3 首先推荐的这款插件是基于 jQuery 和 CSS3 实现的优雅的鼠标悬停手风琴效果. 制作教程 在线演示 Vertical Sliding Accordi
-
基于jQuery实现选取月份插件附源码下载
这是一个基于jQuery的可以选择年份和月份的月份拾取插件,你可以设置点击页面上的任意元素触发弹出年月选择面板,可以是一个链接也可以是一个输入框,广泛应用于月份查询,而无需设置select表单. 效果展示 源码下载 HTML 首先将monthpicker插件相关的css和js文件载入,大家可以到源码下载里下载css和js文件. <link rel="stylesheet" type="text/css" href="jquery.mon
-
推荐6款基于jQuery实现图片效果插件
1.基于jQuery实现的汇图网大屏焦点图效果 汇图网大屏jQuery焦点图代码,可设置切换模式,如淡入淡出切换,左右滚动切换,上下滚动切换,可设置是否自动轮播,可设置鼠标划过是否停止播放等. 在线演示 源码下载 2.HTML5基于SVG实现的过山车动画特效 今天我们要分享一款很酷的HTML5/SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,整体动画效果流畅自然,效果非常酷. 在线演示 源码下载 3.jQuery实现苹果官网页面上下滚动全屏效果 这是一款基于
-
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
通过使用jquery的lazy loader插件可以实现图片的延迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至后面才加载,这样有效的避免了因图片过多而加载慢的弊端. 使用lazy loader插件很简单,只要在页面中引入lazy loader插件,然后为页面上的图片调用延迟加载方法就可以了.lazy loader插件的下载地址:http://www.appelsiini.net/projects/lazyload.下面先看看具体的使用方法: 复制代码 代
-
Notify - 基于jquery的消息通知插件
Sticky是一个简单的页面消息提醒jQuery插件.可以设置让消息在页面的四个角落出现,也可以设置在页面中央出现.可以手动关闭消息,也可以设置成自动关闭. http://thrivingkings.com/sticky/ 2)JNotify是一个JQuery插件,基于JQuery UI实现,用于创建页面消息提醒和状态提示条. http://jnotify.codeplex.com/ 演示地址:http://www.fabiofranzini.com/jNotify/Demo.html 3)H
-
基于jQuery的表格操作插件
大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式.但是我们在日常应用中仍然要用到table表格,其中最好的例子就是对照表.今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示.排序.筛选和操控.如jQuery表格排序插件.jQuery表格拖拽插件.jQuery树形表格插件.设置颜色.点击.替换等效果. 1.DataTables-强大的jQuery表格插件 DataTables是提供了大量特性的强大jQuery表格插件.例