html 拖拽坐标,Html+css实现拖拽导航条

div横向拖拽排序

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;

}

div横向拖拽排序

  • 导航一
  • 导航二导航
  • 导航导航导航三
  • 导航导航四
  • 导五

$(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'});

//创建新元素插入拖拽元素之前的位置(虚线框)

$("

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

});

});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/534732.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

seata 如何开启tcc事物_微服务分布式事务4种解决方案实战

分布式事务分布式事务是指事务的参与者&#xff0c;支持事务的服务器&#xff0c;资源服务器分别位于分布式系统的不同节点之上&#xff0c;通常一个分布式事物中会涉及到对多个数据源或业务系统的操作。典型的分布式事务场景&#xff1a;跨银行转操作就涉及调用两个异地银行服…

python redis 哨兵_Redis哨兵机制

概述上篇文章主要说了Redis 复制的内容&#xff0c;但 Redis 复制有一个缺点&#xff0c;当主机 Master 宕机以后&#xff0c;我们需要人工解决切换&#xff0c;比如使用slaveof no one 。实际上主从复制并没有实现&#xff0c;高可用&#xff0c; 高可用侧重备份机器&#xff…

labview自动生成html,使用LabVIEW实现网页数据提取及交互.pptx

使用 LabVIEW 控制IE或WebBrowser实现网页数据的提取和交互By GSD&#xff1a;attraction - 张生斌2013.1.11可能会遇到的问题网页能否被程序控制&#xff0c;程序和网页如何通信&#xff1f;如何下载网页中我们所关注的数据&#xff1f;如何用程序修改网页中表单的内容&#x…

pdf python定位_如何使用PyPDF2获取PDF定位

我正在使用Python/Django。PyPDF2阅读我目前的pdf。如何使用PyPDF2获取PDF定位我想阅读我已经保存的pdf文件&#xff0c;并获得pdf内单页的方向。我期望能够确定页面是横向还是纵向。tempoutpdffilelocation settings.TEMPLATES_ROOT nameOfFinalPdfpageOrientation pageToE…

android 内容显示栏,android – 在工具栏下显示内容

您好我试图简单地将我的内容放在工具栏下面,但是当我运行我的应用程序时,当它应该低于它时,一些内容隐藏在它后面.我已经阅读了关于使用框架布局来尝试将其分开但我已经陷入困境.我目前正在使用随软件提供的基本android studio导航抽屉模板,并想知道我必须做出哪些更改.我的协调…

ios nslog 例子_iOS 典型内存泄露案例 - zhenshan2013的个人空间 - 51Testing软件测试网 51Testing软件测试网-软件测试人的精神家园...

最近进行iOS 安全黑匣子的测试,在Demo中通过不断的点击调加密接口,同时通过苹果自带instrument的leak工具监控,发现典型的内存泄漏,监控图如下:上图中红色的部分表示该操作触发的代码有内存泄漏的可能,于是拿出源代码来研究一番,源代码如下://加密接口-(IBAction)encrypt:(id)s…

HTML饼状图中心添加文字,echarts饼状图环形中间动态文字

let currName "";let myChart echarts.getInstanceByDom(document.getElementById(‘chart-panel‘));//console.log(myChart);myChart.on(‘mouseover‘, (params) >{currNameparams.name;console.log(params)let opmyChart.getOption();let _label{normal:{sho…

pos共识机制_OK区块链60讲 | 第17集:什么是PoS共识机制

什么是PoS共识机制https://www.zhihu.com/video/1196092110837805056《OK区块链60讲》是由OKEx&#xff06;新浪科技联合出品的区块链科普动画视频&#xff0c;针对区块链零基础用户&#xff0c;通过系列文章、科普动画等形式&#xff0c;从概念、技术、应用等角度&#xff0c;…

html溢出左右滚动,html-选项卡溢出时水平滚动

我在容器中有一个基本表。 该表将包含约25列。 我正在尝试在表格溢出时添加水平滚动条&#xff0c;现在过得很艰难。现在正在发生的情况是&#xff0c;表格单元格通过自动调整单元格的高度并保持固定的表格宽度来容纳单元格的内容。对于我的方法为何无法解决此问题的建议&#…

大疆无人机android登录闪退,你的DJI APP闪退了吗?附官方解决方案

原标题&#xff1a;你的DJI APP闪退了吗&#xff1f;附官方解决方案今天&#xff0c;很多飞友反应&#xff0c;在使用大疆无人机过程中出现DJI APP闪退情况。随后在大疆社区官方给出了解决方案&#xff0c;如下&#xff1a;关于DJI GO 4 APP闪退解决方案目前关于DJI GO4 APP闪退…

ps导出gif颜色不对_PS基础知识(1)

视图平移命令&#xff1a;1,使用工具箱中的抓手工具或着&#xff08;H&#xff09;2按住空格键&#xff0c;上下左右移动视图。&#xff08;常用方法&#xff09;图像格式PSD&#xff1a;原始的图像文件&#xff0c;包含所有的 Photoshop 处理信息&#xff0c;如图层&#xff0…

html如何设置鼠标选中状态,怎么用CSS 设置 当鼠标移动到菜单时,该按钮变色,鼠标点击后,页面停留在鼠标滑过时的状态!!很急!...

用javascript就可以&#xff0c;基本代码在下面&#xff0c;你自己照着改吧htmlheadmeta http-equivContent-Type contenttext/html;charset gb2312 //headbodyscript typetext/javascriptfunction changeA(){document.getElementById(menuA).style.background#f00;document.g…

python中难的算法_Python算法很难吗?python神书《算法图解》PDF电子版分享给你

许多小伙伴后台私信说&#xff0c;python算法让自己很头疼&#xff0c;有没有可以让算法像小说一样有趣的书籍资料呢&#xff1f;看这里吧&#xff01;小宋为大家找到了这本《算法图解》的PDF电子版&#xff01;让你在学习python的路上变得轻松有趣&#xff01;内 容 提 要本书…

音乐分享 html,支付宝朋友圈可以分享音乐嘛

打开手机&#xff0c;找到手机里面的支付宝应用点击进入在进入的支付宝界面里&#xff0c;选择底下的朋友点击进入在弹出的朋友界面选择生活圈选择生活圈下方的朋友动态进到朋友动态界面&#xff0c;点击右上角的照相机图标支付宝 怎么发朋友圈动态&#xff1f;进入支付宝页面中…

eplan单线原理图多线原理图_EPLAN-黑盒-2

3、黑盒的功能定义制作完成的黑盒仅仅图形化描述了一个变频器&#xff0c;它实现逻辑上的智能了吗&#xff1f;双击黑盒弹出属性标签&#xff0c;它的主标签还是现实黑盒&#xff0c;如图&#xff0c;图形和逻辑还没匹配。因此&#xff0c;必须为它重新定义功能。EPLAN的功能定…

html图片热点新窗口,HTML基础必看---表单,图片热点,网页划区和拼接详解

html表单里面的图片点击相应图片跳转到本页其他去在表格里面选了这个 鼠标点击一下跳转到相应区块 代码要怎么写&#xff0c;夜影驱动编程小编今天和大家分享大神需要在一张图片上设置多个能点击跳转的链接区域时&#xff0c;推荐使用网页的热点链接。 参考代码如下&#xff1a…

ios 点击出现另外一套tabbar_IOS 点击tabbaritem跳转到一个新界面,且隐藏tabbar

先自定义一个UITabbarController&#xff0c;用于Storyboard中再在MyTabbarController中实现protocolinterface MyTabbarController : UITabBarController end再实现代理里面的方法implementation MyTabbarController- (BOOL)tabBarController:(UITabBarController *)tabBarCon…

viewpage 去掉左右切换效果_ViewPager实现多页面切换以及动画效果

作者写的非常详细&#xff0c;在此赞一下。尤其画图示意计算。常看代码不知coder数字的含义&#xff0c;看此博文无此感。我只在此列出流程和需要注意的点。步骤1&#xff1a;导入android-support-v4.jar包两种方法(升级到adt17 后需要注意的问题)a&#xff0c; 新建libs文件夹…

获取html内标题,通过html敏捷包获取标题标签

我正在尝试使用htmlagility pack来获得结果的链接和结果我有这个代码using HtmlAgilityPack;using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.IO;using System.Linq;using System.Net;using …

html视频播放div,打造自己的html5视频播放器

推荐这篇文章遇新是直朋能到&#xff1a;前段时间重新少端原码动近基开创学画近基开创学画近基开学习了一下html5的video部分&#xff0c;以前只是停留在标签的使用上&#xff0c;这一次决定深入了解相关的API&#xff0c;并运用这些API打造一个简单的视频播放器。所谓“打造自…