div拖动实现及优化 - 相关文章

【div拖动实现及优化】的更多相关文章

div拖动实现及优化

工作中的一个项目ui界面比较传统(chou),就想着把前端重构一下.内容之一是把导航栏从上方固定高度改为了右侧伸缩的边栏,好处是边栏可伸缩,占用面积小.不完美的地方是有时候会遮挡页面上最右边的按钮,作为一个喜欢追求美的人,是可忍孰不可忍,于是决心改掉这个导航栏,让它可拖拽,如果挡住了就拖一下换个地方,岂不美哉 ?! 本例实际是只上下拖动,全局自由拖动的话将x坐标一起加入计算即可. 说干就干,想了下,觉得处理逻辑很清晰: 1.鼠标放到div上,图标变成可移动的,最好变成五个小指头乱抓的小手形: 2…

js实现一个可以兼容PC端和移动端的div拖动效果

前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouseup在移动端都不起任何作用.毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是:touchstart.touchmove.touchend事件.还有一点要注意的是在PC端获取当前鼠标的坐标是:event.clientX和event.clientY,在移动端获取坐标位置则是:event.…

jquery div拖动效果示例代码

div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过复制代码代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra…

让一个div拖动和让一个panel拖动加拉大拉小

一.让一个div拖动 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery:鼠标拖动DIV</title> <style t…

jquery实现很简单的DIV拖动

今天用jquery实现了一个很简单的拖动...实现思路很简单如下: 在thickbox 弹出层内实现拖拽DIV,那么得进行一下相对宽高的运算:必须加上相对于可见窗口宽高和弹出层宽高之间的差: var x = event.clientX - (document.documentElement.clientWidth - 620) / 2 - event.offsetX; var y = event.clientY - (documen…

实现DIV拖动

Ajax的到来让B/S中的客户端中开发有火了一把,网上出现了很多优秀的开源框架和UI,比较著名了有prototype,YUI,GWT等,但很多时候发现这些东西很难用到你的系统之中,有时候你的系统仅仅需要实现一两个UI功能,如果把整个架构都引入进来是不现实的.所以很多时候是需要自己动手去做一些工作. 现在弹出窗口在B/S系统中很受青睐,它有美观性和易用性等诸多特点,比如我用的sina 博客登陆窗口就是应用了弹出窗口.以前我们做弹出窗口只用一个window.open()搞定,但后来发现这种窗口有…

jQuery实现DIV拖动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <script src="jquery-1.10.2.js"></script…

探讨把一个元素从它所在的div 拖动到另一个div内的实现方法

故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动, 单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似于表格里面,而且有的情况下还需要限制拖动只能在水平方向,自己搜集资料, 实验,终于搞出来了. 原理上主要分为两类: HTML5自带的拖放api,可用的库有 : Vue.Draggable 使用js 监听鼠标的移动位置, 可用的库有: jquery ui 使用point-event: none(下面会…

手机版 div拖动

<!doctype html> <html> <head> <title></title> <script type="text/javascript"> var mouseX; var objX; var isDowm = false; //是否按下鼠标 function mouseDown(obj, e) { obj.style.cursor = "move"; mouseX = e.cli…

自定义div 拖动。键盘上下左右键移动，ctrl+Q控制是否可以移动，ctrl+回车，返回初始状态

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="智能社 - zhinengshe.com" /> <meta name="copyright" content="智能社 - zhinengshe.com" /> <t…