js实现可视化区域内拖拽

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible"…

JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口拖拽效果,具有可改变大小.最大化.最小化.关闭等功能,以完整实例形式较为详细的分析了JavaScript操作窗口的大小改变.还原及关闭等功能的相关实现技巧,需要的朋友可以参考下本文实例讲述了JS实现漂亮的窗口拖拽效果.分享给大家供大家参考.具体如下: 这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最…

理解事件捕获。在限制范围内拖拽div+吸附+事件捕获

一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二.一步步的实现这个拖拽过程的几个要求 (一)拖拽起来里面的边框是表示页面哦(我们的屏幕所能看到的东东). 获取移动距离的思路: 记录鼠标按下和鼠标抬起两次的坐标,然后相减,再加上div跟边缘之间的间距.就得到移动距离. 之前我也在这里困惑了,不明白为什么还要再加上offsetLeft.原因就是cl…

拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到这里突然想起一句话“没有任何一个题目是彻底完成的.总还会有很多事情可做......” 我想这句话程序开发大概也适用吧,前端开发人员总是可以结合自己之前学到“拖拽”相关知识,不断扩展.完善下去....... 利用匿名函数自执行实现封装 ;(function(){ //do something.…

基于svg.js实现对图形的拖拽、选择和编辑操作

本文主要记录如何使用 svg.js 实现对图形的拖拽,选择,图像渲染及各类形状的绘制操作. 1.关于SVG SVG 是可缩放的矢量图形,使用XML格式定义图像,可以生成对应的DOM节点,便于对单个图形进行交互操作.比CANVAS更加灵活一点.关于SVG的基础知识,请参考SVG学习地址. 2.SVG.js 今天要说的主角是 SVG.js,它是对SVG本身的一个封装库,提供各种API使对SVG的使用更加方便,相当于JQuery对于JS,它的自我介绍是轻量级,速度快,更具易读性.SVG.js官网介绍…

(Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动,一定需要脱离标准文档流,所以我们给它使用绝对定位. 2.利用视觉欺骗,点击鼠标悬浮的其实是利用JS生成的一个Div,交换信息的两个Div并没有位置交换,只是把双方属性进行了交换. 3.利用了勾股定理去判断距离. ##效果图如下: 网页源代码: <!DOCTYPE html> <html&g…

前端js区域上下拖拽

先说说需求吧,网页内又上下两个区域,需要做到的功能是,第一个区域A底部的边可以进行拖拽使得区域变大或变小,同时第二个区域B跟着拖动的变化进行自适应. 思路: 1.使用一个假的div定义为那条可进行拖拽的线.需要设定一个变动的高度,因为可拖动的线也需要根据拖动区域的改变而改变. 2.定义好鼠标触发事件,事件主要分为三个部分:鼠标移动.鼠标抬起和鼠标按下. 事件的内容很简单,就是返回拖拽的高度变化top即可. 3.对刚才定义好假的拖拽线进行事件绑定.根据自己的需求和获取到的高度来设计A.B两个区域需…

【原创】js实现一个可随意拖拽排序的菜单导航栏

1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换.未添加和已添加里面的小方块位置可以拖放. 3.结构分析.整体结构用红线框标出.可以分为三个部分.关注底部拖拽部分.一个div里面嵌套两个div.定位关系如图.本次教程之作一个拖拽框 1.好了,基本情况已经分析清楚先实现页面样式. <div class="wrap"> <…

纯JS.CSS编写的可拖拽并左右分栏的插件（复制代码就能用）

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>jquery拖拽改变div大小效果</title> <style>*{margin:0;padding:0;}ul,o…

基于JS的WEB会议室预订拖拽式图形界面的实现

06年的一篇blog,转到这个博客上: 很早之前写的,后来由于这个功能模块取消,最终没有上线,所以与Server交互的那部分还没有写,不过那部分方案我也已经出来了,而且现在客户端这一部分已经通过了比较完备的测试.大家看看这一部分的代码,应该一看就懂. 那时候也不知道那么多js的UI库,所以全部都是自己绘制的,界面有点简陋,希望凑或者看吧,再就是我们这个项目是局域网项目,所以大家用的都是IE,没有考虑跨浏览器的因素.发出来希望对做同样应用的同志少走点弯路,我写的时候,网上没有这方面的代码,现在有没…

js实现本地图片文件拖拽效果

如何拖拽图片到指定位置,具体方法如下在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 <!DOCTYPE…

jquery.dad.js实现table的垂直拖拽（并取到当前拖拽对象）

http://sc.chinaz.com/jiaoben/161202572210.htm 1.首先官网实例,实现的都是div为容器的元素拖拽,示例如下: 2.最近的项目,要实现tbody的每一行tr能够拖拽,并记录拖拽的次数 (1)首先:定义html元素(这里就以举个简单的示例) (2)接着:定义js配置文件 var test=$('.drag-tbody').dad({ target:"tr", //定义要拖拽的DOM对象 }) *****这里的代码有两点需要注意: (1)$对象:…

JS实现多Div模块拖拽功能

空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到拖拽开始(onStart),拖拽时候(onMove),拖拽结束(onStop)三个时候的准确状态值及坐标 <!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Ty…

js实现登陆页面的拖拽功能

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登陆页面的拖拽功能实现</title> </head> <style type="text/css"> *{ margin:0; padding:0; } a{ text-decoration: none; } .dialog{ width: 380px;…

js阻止默认事件、拖拽等等

1.自定义右键菜单: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> * {margin:0; padding:0; list-style:none;} #div1 {position:absolute; width:80px; background:#CCC; border:1px so…

js 禁用右键菜单、拖拽、选中、复制

//禁用拖拽 document.ondragstart = function () { return false; }; /** * 禁用右键菜单 */ document.oncontextmenu = function () { event.returnValue = false; }; /** * 禁用选中功能 */ document.onselectstart = function () { event.returnValue = false; }; /** * 禁用复制功能 */ doc…

js原生代码实现鼠标拖拽(超简单)

首先先来看这一张图在这种图中,盒子的大小为512px,并且margin-left:-250px margin-top:140px;并通过一些样式让其在中部显示这些样式都不是重要的,这里加个margin是为了让其出现拖拽的时候出现鼠标偏移,好做演示而已,不然margin:0 auto 就可以实现盒子的居中首先通过offsetLeft的方法获取到盒子的偏移值,然后在通过clientX,clientY获取到鼠标的坐标,通过当前坐标减去offsetLeft的坐标就可以获取鼠标在div里面的具体数…

D3.js 力导向图的拖拽（drag）与缩放（zoom）

不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终于解决了这个问题. 以下是事情发生的原因及解决的代码: var zoom = d3.behavior.zoom() .scaleExtent([, ]) //缩放范围 .on("zoom", zoomed); function zoomed() { container.attr("…

ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

说在前面最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用了这个插件.在使用的过程中发现中文的相关文档较少,说多了都是泪,硬着头皮看官方的网站,本来英文不咋地,只能边查单词边用了,于是就有了这篇文章,主要是总结在使用Dropzone中的遇到的一些问题及详细的使用步骤. Dropzone.js是啥? Dropzone.js是一个开源库,提供拖放文件上传及图像…

JS 某一区域内所有CheckBox全选和取消全选(.net)

假设在某个table中的两个td,一个放全选checkbox,一个放所有的checkbox[其他标签类似] eg: <td>人才类别:<asp:CheckBox ID="choseAll" ToolTip="全选" onclick="CheckedAll('choseAll','cbl')" runat="server" /> </td> <td …

js drag drop 收藏夹拖拽移除的简单例子

代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> div > div{ display: inline-block; padding: 10px; background-color: #aaa; margin:…

原生JS，实现图片可拖拽，并且移动四个角和四条变能够自由变换图片大小

网上搜的资料,源码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0 } .box { position: absolute; top: 100px; left: 100px; } /*四边*/ .box .t, .box .b, .box .l, .box .r { position: absol…

html5 Sortable.js 拖拽排序源码分析

最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http://rubaxa.github.io/Sortable/ 技术交流qq群 302817612 拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上 ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件…

js拖拽文件夹上传

由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调用上传方法即可.拖拽上传能给用户多一种选择,提高用户体验,下面是最简单的一个推拽上传示例 HTML部分:  <div class="dropBox_wrap"> <div id="dropbox" clas…

js拖拽上传文件上传之拖拽上传

由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调用上传方法即可.拖拽上传能给用户多一种选择,提高用户体验,下面是最简单的一个推拽上传示例 HTML部分:  <div class="dropBox_wrap"> <div id="dropbox" class=&q…

纯js实现DIV拖拽

写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但发现这段代码使用前必须设置top和left样式属性,否则拖动时div会有跳动,而且不支持多个div的拖动.于是对代码大概修改了一番,贴在这里,以备后用,希望大神勿怪. /** * 纯js实现多div拖拽 * @param bar, 拖拽触柄 * @param target, 可拖动窗口 * @param in…

好用的JS拖拽插件

下载artDialog插件的时候发现它把拖拽单独封装成了一个方法,挺好用的,使用方法如下... 第一种拖拽方式-点击容器指定区域进行拖拽 $('.ui-dialog').on(DragEvent.types.start, '[i=title]', function(event) { DragEvent.create($('.ui-dialog')[0], event); }); 第二种拖拽方式-点击整个容器进行拖拽 DragEvent.create($('.ui-dialog')[0]); 拖拽…