react拖动div

2024-08-24

react中实现可拖动div

把拖动div功能用react封装成class,在页面直接引入该class即可使用. title为可拖动区域.panel为要实现拖动的容器. 优化了拖动框超出页面范围的情况,也优化了拖动太快时鼠标超出可拖动区域的情况,优化了拖动会卡顿的情况. 页面中添加引入方法: <Draggable panelId="要拖动容器的id" titleId="容器内标题的id" contentId="容器内除标题外的其他部分id" setPanelPositi

js实现可拖动Div

随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的 mousemove事件 3.取消事件然后我们看一下代码: function

javascript拖动div

div拖动代码,在用此代码之前,你可能需要将你需要拖动的元素style设置position: absolute; #textareaSavaDiv{ position: absolute; right:50px; width:300px; height:300px; } html <div id="textareaSavaDiv"> <input type="text" id="username"/> </div&g

easyUI draggable插件使用不当，导致拖动div内部文本框无法输入；设置echarts数据为空时就显示空白，不要动画和文字

先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text

[可拖动DIV]刚开通博客顺便就写了点东西！

说说我自己的思路首先需要一个初始div div { border: 1px #333 solid; width: 200px; height: 50px; } <div id="od">我是一个可拖动div</div> 然后就是鼠标事件,想象一下拖动这个过程需要用到哪些事件... 1.鼠标按钮按下事件mousedown 2.鼠标按钮松开事件mouseup 3.鼠标移动事件mousemove 第一步:给div添加鼠标按钮按下事件,这个事件需要完成以下事情一.获

JS拖动DIV布局

方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse

拖动DIV

链接:https://www.cnblogs.com/joyco773/p/6519668.html 移动端:div在手机页面上随意拖动 1 <!doctype html> 2 <html> 3 <head> 4 <title>弹窗</title> 5 <meta charset="utf-8"> 6 <script type="text/javascript" src="

JS实现拖动div层移动

JS实现拖动div层移动在谈到拖动div层之前,我们有必要来了解下下面JS几个属性的区别---- pageX,pageY,layerX,layerY,clientX,clientY,screenX,screenY,offsetX之间的区别! PageX: 鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.(只有firefox等标准游览器特有,IE没有). clientX: 鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的

基于jquery的可拖动div

昨天给大家介绍了一款基于jquery ui漂亮的可拖动div实例,今天要给大家分享一款基于jquery的可拖动div.这款可拖动div只要引用jquery就可以,无需引用jquery ui.还实时记录的鼠标的坐标.一起看下效果图吧. 在线预览源码下载实现的代码. html代码: <span class="text noselect">DRAGGIN' WINDOWS<br /> <a href="http://***">T

一款基于jquery ui漂亮的可拖动div实例

今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览源码下载实现的代码. html代码: <div id="box1" class="box blurred-bg tinted"> <h1> Blurred Background</h1> <h2> By <a h

Javascript 简单实现鼠标拖动DIV

http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/article/10578.htm <html> <head><title>拖动效果函数演示 by Longbill.cn</title> <style> body { font-size:12px; color:#333333; border : 0px

VUE001. 拖动div盒子（自定义指令v-directives）

拖动div是一个逻辑很简单的需求,监听容器的鼠标按下松开的事件,执行函数通过DOM改变标签的CSS偏移量. 在VUE构建的项目中,通过标签的 @mousedown 和 @mouseup 赋予行为事件,便可以通过原生JS实现这一需求. 但VUE提供了更加方便的途径自定义指令节选自官方文档 " 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 D

vue实现拖动div元素

html: <div id="app1"> <div v-drag class="drag"></div> <div v-drag class="drag"></div> </div> css: .drag{ width: 100px; height: 100px; position: absolute; top: 0; left: 0; background-color:

简单的鼠标可拖动div 兼容IE/FF

来源:http://www.cnblogs.com/imwtr/p/4355416.html 作者: 主要思路: 一个div,注册监听onmousedown事件,然后处理获取的对象及其相关值(对象高度,clientX/clientY位置等) 并继而转为监测onmousemove事件,在鼠标移动事件中更新div对象的位置属性鼠标松开的时候解除监听,更新位置完成. 需要注意的两点: 1.更新对象的位置需要用到o.style.left等,这些CSS属性只能内嵌才能被访问到: <div id="

拖动div简单事例代码

事例文件下载 //拖动容器代码 var rDrag = { o: null, init: function (o) { o.onmousedown = this.start; }, start: function (e) { var o; e = rDrag.fixEvent(e); e.preventDefault && e.preventDefault(); rDrag.o = o = this; o.x = e.clientX - rDrag.o.offsetLeft; o.y =

JS 拖动DIV 需要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> <title>自由拖动的DIV层方块</title

可拖动div

客户要求,页面有图片并且可以随意拖动具体实现: css: #div1{ width: 30px; height: 30px; /*一定要绝对定位*/ position: absolute; /*初始位置*/ left: 5%; } js: window.onload = function(){ var div1 = document.getElementById("div1"); div1.onmousedown = function(ev){ var oevent = ev ||

echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件

1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resultArr=[]; for(var i=0;i<_data.length;i++){ var res=_data[i] resultArr.push({ name:new Date(res.time)+"", value:[res.time,Number(res.value).toFi

记一个react拖动排序中的坑：key

在做一个基于react的应用的时候遇到了对列表拖动排序的需求.当使用sortable对列表添加排序支持后发现一个问题:数据正确排序了,但是dom的顺序却乱了,找了一会儿原因后发现是因为在渲染数据的时候指定了一个动态的key(map((o,i)=>(<li key={i}></li>))),导致了dom顺序混乱.解决方案有:将数据装入模型的时候生成一个不重复的key,或者使用lodash的uniqueId: import uniqueId from 'lodash/unique

原生JavaScript拖动div兼容多种浏览器

说句题外话,虽然博客园嵌入式氛围不行,Web前端氛围还是很好的.我又从 chinaunix 回来了. <html> <head> <script type="text/javascript"> var x; var y; function $(id){ return document.getElementById(id) } function mousedown(){ x=event.clientX-$("px").style.p

react拖动div

热门专题