js实现横向拖拽导航条功能
效果如下：
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>div横向拖拽排序</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
body, div {
padding: 0px;
margin: 0px;
}
.box {
position: relative;
margin-left: 15px;
padding: 10px;
padding-right: 0px;
width: 810px;
border: blue solid 1px;
}
.box ul{
list-style: none;
overflow: hidden;
padding: 0;
margin:0;
}
.drag {
float: left;
border: #000 solid 1px;
text-align: center;
}
.box ul li a{
display: block;
padding: 10px 25px;
}
.drag-dash {
position: absolute;
border: #000 solid 1px;
background: #ececec;
}
.dash {
float: left;
border: 1px solid transparent;
}
</style>
</head>
<body>
<h1>div横向拖拽排序</h1>
<div class="box">
<ul>
<li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航一</a></li>
<li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航二导航</a></li>
<li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航导航导航三</a></li>
<li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航导航四</a></li>
<li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导五</a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
var range = {x: 0, y: 0};//鼠标元素偏移量
var lastPos = {x: 0, y: 0, x1: 0, y1: 0}; //拖拽对象的四个坐标
var tarPos = {x: 0, y: 0, x1: 0, y1: 0}; //目标元素对象的坐标初始化
var theDiv = null, move = false;
var choose = false; //拖拽对象 拖拽状态 选中状态
var theDivId = 0, theDivHeight = 0, theDivHalf = 0;
var tarFirstY = 0; //拖拽对象的索引、高度、的初始化。
var tarDiv = null, tarFirst, tempDiv; //要插入的目标元素的对象, 临时的虚线对象
var initPos = {x: 0, y: 0};
var theDivWidth;//拖拽对象的宽度
$(".drag").each(function () {
$(this).mousedown(function (event) {
choose = true;
//拖拽对象
theDiv = $(this);
//记录拖拽元素初始位置
initPos.x = theDiv.position().left;
initPos.y = theDiv.position().top;
//鼠标元素相对偏移量
range.x = event.pageX - theDiv.position().left;
range.y = event.pageY - theDiv.position().top;
theDivId = theDiv.index();
theDivWidth = theDiv.width();
theDivHalf = theDivWidth / 2;
theDiv.removeClass("drag");
theDiv.addClass("drag-dash");
theDiv.css({left: initPos.x + 'px', top: initPos.y + 'px'});
// 创建新元素 插入拖拽元素之前的位置(虚线框)
$("<div class='dash'></div>").insertBefore(theDiv);
tempDiv = $(".dash");
$(".dash").css("width" , theDivWidth);
return false
});
});
$(document).mouseup(function (event) {
if (!choose) {
return false;
}
if (!move) {
//恢复对象的初始样式
theDiv.removeClass("drag-dash");
theDiv.addClass("drag");
tempDiv.remove(); // 删除新建的虚线div
choose = false;
return false;
}
theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上
//恢复对象的初始样式
theDiv.removeClass("drag-dash");
theDiv.addClass("drag");
tempDiv.remove(); // 删除新建的虚线div
move = false;
choose = false;
return false
}).mousemove(function (event) {
if (!choose) {return false}
move = true;
lastPos.x = event.pageX - range.x;
lastPos.y = event.pageY - range.y;
lastPos.x1 = lastPos.x + theDivWidth;
// 拖拽元素随鼠标移动
theDiv.css({left: lastPos.x + 'px', top: lastPos.y + 'px'});
// 拖拽元素随鼠标移动 查找插入目标元素
var $main = $('.drag'); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，
$main.each(function () {
tarDiv = $(this);
tarPos.x = tarDiv.position().left;
tarPos.y = tarDiv.position().top;
tarPos.x1 = tarPos.x + tarDiv.width() / 2;
tarFirst = $main.eq(0); // 获得第一个元素\
tarFirstX = tarFirst.position().left + theDivHalf; // 第一个元素对象的中心纵坐标
//拖拽对象 移动到第一个位置
if (lastPos.x <= tarFirstX) {
tempDiv.insertBefore(tarFirst);
}
//判断要插入目标元素的 坐标后， 直接插入
if (lastPos.x >= tarPos.x - theDivHalf && lastPos.x1 >= tarPos.x1) {
tempDiv.insertAfter(tarDiv);
}
});
return false
});
});
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
本文实例讲述了JS+CSS实现带有碰撞缓冲效果的竖向导航条代码.分享给大家供大家参考.具体如下: 这是一款碰撞缓冲效果的导航条,JavaScript妙味课堂奉献给大家的作品,很不错的竖向菜单,希望大家喜欢.所用技术是JS和CSS. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-pzxg-r-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
-
基于JS代码实现导航条弹出式悬浮菜单
1.概述 采用弹出式悬浮菜单,不但可以使网站的导航内容更加清晰,而且不影响页面的整体效果.运行本实例,如图1所示,当鼠标移动到一级导航菜单的标题上时,将弹出悬浮菜单显示该菜单对应的子菜单,鼠标移出时,将隐藏悬浮菜单. 2.技术要点 本实例主要是在JavaScript中,动态改变<div>标签对象的style属性的display属性值来实现动态显示和隐藏二级导航菜单.其实,每一个一级菜单下的二级菜单内容是已经添加在网页的<div>标签中,只是此时设置了<div>不显示.所
-
javascript实现的鼠标悬停时动态翻滚的导航条
动态翻滚的导航条 .clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block} div#nav{height:32px; background:url(http://files.jb51.net/demoimg/200911/YL29.jpg) repeat-x} div#nav ul{
-
JS实现选中当前菜单后高亮显示的导航条效果
本文实例讲述了JS实现选中当前菜单后高亮显示的导航条效果.分享给大家供大家参考.具体如下: 这里演示选中当前菜单后,该菜单高亮显示,也就是说在不改变菜单CSS代码的情况下,用JavaScript去控制菜单的背景,如果该菜单项被点击后,将赋予它一个与众不同的背景颜色或背景图像,这样可以清淅的指引用户下在浏览的网站栏目,本菜单不需要动态语言的加入,简单方便而且效果好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cho-nav-gl-sho
-
利用js定义一个导航条菜单
效果: 一.html代码: <div class="Maintenance"> <div class="Title"> <div class="M_Button" id="Plan">menu1</div> <div class="M_Button" id="Expert">menu2</div> <div c
-
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用JavaScript实现的,不过代码好像是从jQuery里摘出来的,有点像. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mouse-over-nav-scroll-style-codes/ 具体代码如下: <!DOCTYPE htm
-
仿客齐集首页导航条DIV+CSS+JS [代码实例]
作者子鼠 客齐集首页的一个效果, 今天有人问我是怎么写的,于是晚上就又重写了一个; 顺便把那个布局再理一下: 你可以先看一下客齐集首页的效果:http://shanghai.kijiji.cn 我试着不用position:absolute的方法: 但写起来太难了: 后来还是用position:absolute了: 但在客齐集站上的是没有用的:真不知道当时是怎么写出来的:以下是效果图: 以下是布局部分 复制代码 代码如下: <div id="info"> <div
-
CSS3+Js实现响应式导航条
今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 复制代码 代码如下: <div c
-
纯JS实现弹性导航条效果
效果图: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0; padding:0; list-style:none;} ul{ overflow:hidden; background:#ccc; width:574px; margin:100px auto;
-
js实现横向拖拽导航条功能
效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>div横向拖拽排序</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/cs
-
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
本文实例讲述了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法.分享给大家供大家参考.具体如下: 左右拖拽切换对比图片效果,运行效果后,图片中间有个拖动条,拖动左右滑动,可看到图片不一样的效果,女模特的脸变嫩了,呵呵,其实是用了两张背景图片实现的,这就需要jquery.beforeafter.js插件了,拖动时候的小图标不见了,路径可以在jquery.beforeafter.js中设置,不多说了. 运行效果截图如下: 在线演示地址如下: http://d
-
js实现鼠标拖拽多选功能示例
最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. <!DOCTYPE html> <html> <head> <title>鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"&
-
React.js组件实现拖拽排序组件功能过程解析
因为使用了react.js技术栈,所以封装优先考虑输入和输出.基于数据驱动去渲染页面.控制拖拽元素的顺序. 由于我不考虑兼容IE8等旧版本浏览器,拖拽的效果采用了HTML5的拖放(Drag 和 drop).当然,如果要求兼容性丰富,使用鼠标点击的相关事件也很简单. 实现的效果如下: 第一步是先了解H5拖放的相关属性,MDN上有详细的说明,链接 有一点需要注意的是,react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法.例如原生的click事件,在react.js里应使
-
js 实现div拖拽拉伸完整示例
目录 前言 HTML CSS JS 前言 今天和大家分享一下.如何用js实现div拖拽拉伸等功能.功能比较简单,我就不赘述了.直接上代码. HTML <div class="resize" data-key="drag"> <img src="../images/liya.jpg" alt=""> <div class="line line-n" data-key="
-
原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方js库和插件 3.多图形绘制(支持画笔.线条.箭头.三角形.矩形.平行四边形.梯形以及多边形和圆形绘制) 4.拖拽式绘制(鼠标移动过程中不断进行canvas重绘) 5.图片绘制(作为背景图片时重绘会发生闪烁现象,暂时有点问题,后面继续完善) 5.清空绘制功能 6.新版本优化绘制性能(使用共享坐标变量数
-
JS实现拖拽进度条改变元素透明度
今天要分享的是运用原生JS拖拽进度条改变元素透明度,效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS拖拽进度条改变元素透明度</title> <style> #pa
-
vue+element-ui+sortable.js实现表格拖拽功能
本文实例为大家分享了vue+element-ui+sortable.js实现表格拖拽的具体代码,供大家参考,具体内容如下 效果如下: 1.vue使用cli创建项目就不说了,本人使用的是cli3.x版本 2.下载element-ui npm i element-ui -S 3.引入element-ui,找到main.js,加入如下代码 // 导入element-ui,和全局使用element-ui样式 import ElementUI from "element-ui"; import
-
Dropzone.js实现文件拖拽上传功能(附源码下载)
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示 源码下载 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&
-
基于jquery插件实现拖拽删除图片功能
本文实例为大家分享了jquery插件实现拖拽删除图片功能的具体代码,供大家参考,具体内容如下 实现以下效果 完全拖出这个层,图片会消失,否则图片会回到原来的位置 <html> <head> <title></title> <style type="text/css"> #mydiv{ width:900px; background-color:#444; border:1px solid red} #mydiv2{ width