精华内容
参与话题
问答
  • draggabilly一款功能强大的拖动拖拽元素插件
  • <template> <div class="drag"> <div ref="element" class="content" v-drag draggable="false"> <p>文字网页</p> </div> <div style="hei...
    <template>
        <div class="drag">
           <div ref="element" class="content" v-drag draggable="false">
              <p>文字网页</p>
           </div>
           <div style="height:2000px;width:100%"></div>
        </div>
    </template>
    <script >
       export default {
            data(){
                return {
                    dd:"",
                    inout:""
                }
            },
            directives: {
                drag(el){
                    let oDiv = el; //当前元素
                    let self = this; //上下文
                    //禁止选择网页上的文字
                    document.onselectstart = function() {
                        return false;
                    };
                    oDiv.onmousedown = function(e){
                        //鼠标按下,计算当前元素距离可视区的距离
                        let disX = e.clientX - oDiv.offsetLeft;
                        let disY = e.clientY - oDiv.offsetTop;
                        document.onmousemove = function(e){
                            //通过事件委托,计算移动的距离
                            let l = e.clientX - disX;
                            let t = e.clientY - disY;
                            //移动当前元素
                            oDiv.style.left = l + "px";
                            oDiv.style.top = t + "px";
                        }
                        document.onmouseup = function(e){
                            document.onmousemove = null;
                            document.onmouseup = null;
                        };
                        //return false不加的话可能导致黏连,就是拖到一个地方时div粘在鼠标上不下来,相当于onmouseup失效
                        return false;
                    };
                }
            }
       }
    </script>
    <style>
    .drag{
        position: relative;
    }
    /* position:absolute;这个还是要设的,不然拖动块定不了位置 */
    .content{
        position:absolute;
        height:100px;
        width:100px;
        background-color: #67C23A;
        cursor: pointer;
    }
    </style>
    
    

     

    展开全文
  • 基于react实现的移动端的可吸附悬浮按钮 预览地址(移动端): kkfor.github.io/suspend-but… 源码地址: ...安装 npm install suspend-button -S 复制代码使用 import React, { Component } from 'react' ...

    基于react实现的移动端的可吸附悬浮按钮

    预览地址(移动端):

    kkfor.github.io/suspend-but…

    源码地址:

    github.com/kkfor/suspe…

    安装

    npm install suspend-button -S
    复制代码

    使用

    import React, { Component } from 'react'
    import ReactDOM from 'react-dom'
    import SuspendButton from 'suspend-button'
    
    class App extends Component {
      render() {
        return (
          <SuspendButton></SuspendButton>
        )
      }
    }
    
    ReactDOM.render(
      <App />,
      document.getElementById('root')
    )
    复制代码

    转载于:https://juejin.im/post/5cc30d396fb9a0322e739848

    展开全文
  • 基于react实现的移动端的可吸附悬浮按钮 预览地址(移动端): https://kkfor.github.io/suspend-button/ 源码地址: https://github.com/kkfor/suspend-button

    基于react实现的移动端的可吸附悬浮按钮

    预览地址(移动端):

    https://kkfor.github.io/suspend-button/

    源码地址:

    https://github.com/kkfor/suspend-button

    安装

    npm install suspend-button -S
    

    使用

    import React, { Component } from 'react'
    import ReactDOM from 'react-dom'
    import SuspendButton from 'suspend-button'
    
    class App extends Component {
      render() {
        return (
          <SuspendButton></SuspendButton>
        )
      }
    }
    
    ReactDOM.render(
      <App />,
      document.getElementById('container')
    )
    
    展开全文
  • 用Ajax实现拖动,可随时,随想,随意的拖动,修改页面布局.
  • <!DOCTYPE html> <html> <head> ...meta charset="utf-8">...拖拽验证</title> <style type="text/css"> * { margin: 0; padding: 0; box-sizing:...
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>拖拽验证</title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    				box-sizing: border-box;
    			}
    
    			.box {
    				cursor: pointer;
    				margin: 50px auto;
    				height: 40px;
    				width: 300px;
    				line-height: 40px;
    				text-align: center;
    				position: relative;
    				background-color: #e8e8e8;
    			}
    
    			.rec {
    				position: absolute;
    				left: 0;
    				top: 0;
    				width: 0;
    				height: 100%;
    				background: #00b894;
    			}
    
    			.rect {
    				position: relative;
    				width: 300px;
    				height: 100%;
    			}
    
    			.silde {
    				position: absolute;
    				height: 100%;
    				width: 40px;
    				background: white;
    				left: 0;
    				border: 1px solid #CCCCCC;
    				top: 0;
    			}
    			.silde img{
    				width: 100%;
    			}
    			a{
    				width: 40px;
    				height: 100%;
    				position: absolute;
    				right: 0;
    				bottom: 0;
    				display: inline-block;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box">
    			<a></a>
    			<div class="rec">
    				<div class="rect">
    					拖拽验证
    					<div class="silde">
    						<p>>></p>
    					</div>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    <script type="text/javascript">
    	// 获取元素节点
    	var box = document.querySelector('.box')
    	var rec = document.querySelector('.rec')
    	var rect = document.querySelector('.rect')
    	var silde = document.querySelector('.silde')
    	var p = document.querySelector('p')
    	var a = document.querySelector('a')
    	// 定义一个X坐标轴的全局变量
    	var changeX
    
    	// 点击进行拖拽
    	silde.onmousedown = function(e) {
    		// 记录点击时的X坐标
    		var initX = e.clientX
    		console.log(initX)
    		// 鼠标移动事件
    		document.onmousemove = function(e) {
    			// 记录移动时的X坐标
    			var moveX = e.clientX
    			// 计算差值
    			changeX = moveX - initX
    			console.log(changeX)
    			// 判断差值范围
    			if (changeX < 0) {
    				changeX = 0
    			}
    			if (changeX > 260) {
    				changeX = 260
    				console.log("到底啦")
    			}
    			silde.style.left = changeX +'px'
    			rec.style.width = changeX + 'px'
    			if(changeX>=260){
    				// 阻止点击和移动事件发生
    				document.onmousemove = null
    				silde.onmousedown = null
    				rec.style.color = 'white'
    				rec.innerHTML = '验证成功'
    				silde.style.background = '#FF0000'
    				a.style.display='block'
    				a.innerHTML = '√'
    				alert("验证成功")
    			}
    			document.onmouseup = function(){
    				document.onmousemove = null
    				if(changeX<260){
    					silde.style.left = 0
    					rec.style.width = 0
    				}
    			}
    
    		}
    	}
    </script>
    

     

    展开全文
  • 利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。 webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar的大小,于是,我们可以将整个拉伸区域变成和容器一样...
  • 在某教师培训平台上刷网课,之前破解了其进度条无法拖动的限制:破解网课视频进度条无法拖动问题 但就算进度条能拖动了,还得等视频缓存后才能拖过去。有时缓存很慢,仍然比较麻烦。于是开始探索如何不再看视频,...
  • 我是直接重载了CheckedListBox,不想重载控件可以自己+个事件,注意:必须开启控件的AllowDrop为True,不然拖动的时候会禁止拖动,显示一个禁止标志 using System.Windows.Forms; using System.Drawing; namespace ...
  • jquery-ui 拖动列表 与 拖拽

    千次阅读 2016-08-26 11:28:09
    一、列表拖动——Sortable Widget 代码: define(["jqueryUI","jquery"],function() { var dragInit = { initVisualModuleSortAble:function(){ //用于拖动的dom,可以是多个拖动的dom的父节点 $('#body...
  • 程序运行截图如下:程序很简单,有个坑,如下:QGraphicsScene要经过dragMoveEvent(QGraphicsSceneDragDropEvent *event)才能触发这个dropEvent(QGraphicsSceneDragDropEvent *event)程序结构如下:源代码如下:...
  • JS 实现控件拖拽/拖动

    千次阅读 2015-11-24 14:45:53
    下面是实现控件拖拽的完整代码,只实现了拖拽,边界控制没做,可以自行添加。 (function ($) {  var move = false; //标记控件是否处于被拖动状态  var dragOffsetX = 0; //控件左边界和鼠标X轴的差  var ...
  • 拖拽——拖动进度条显示进度

    千次阅读 2017-03-02 14:16:00
    拖拽——拖动进度条显示进度 拖动进度条代码 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="... ...
  • 拖拽插件 https://github.com/SortableJS/Vue.Draggable div随意拖动 https://github.com/464884492/vuedragx
  • 工具VS2013,框架.NET 2.0下载地址: ...1、当鼠标点击时,记下源...2、当拖动时,记下鼠标所指的目标位置(indexoftarget) 3、将源位置的项,插入到目标位置 4、删除源位置项接下来简单介绍下步骤: 1、在窗口中添加
  • <!DOCTYPE html> <html> <head> <title>move</title> </head> <style type="text/css"> .body_css { ...
  • 概述:实现拖拽工作流程配置,可以鼠标左右移动元素,鼠标双击可以删除元素。 基本原理:就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变...
  • Eclipse版,如果你导入DemoSmartDragListView报错,那么就自己import并add那个appcompat_v7(如果你的项目目录下有这个工程的话就添加你自己的)就正常了,其实Demo报错并不影响,关键是demo里的jar包才是可拖拽控件...
  • Unity 从UI中拖拽对象放置并拖动

    千次阅读 多人点赞 2018-07-31 15:49:04
    需求:点击UI,在场景中生成3D对象,对象跟随鼠标移动,放置后可再次拖拽对象,改变其位置。做了一个小Demo,如下图所示: 实现大致思路: 射线碰撞检测 对象空间坐标变换(世界坐标-&amp;gt;屏幕坐标、屏幕...
  •  鼠标点击控件(自绘控件,可继承任意控件类,下文将给出示例),并且进行拖拽,会有一个半透明黑色阴影来表示当前拖动的位置。当松开鼠标,控件重新绘制在鼠标松开的位置。拖拽功能的实现代码主要在DoEvent函数和...
  • Flex拖拽-Canvas容器里拖动Box

    千次阅读 2010-01-25 21:34:00
    2009-02-18缩略显示Flex拖拽-Canvas容器里拖动Box文章分类:Web前端关键字: flex, flex拖拽, canvas, box <![CDATA[ import mx.core.IUIComponent; import mx.containers.Box; import mx.containers.Canva
  • 看到今日头条的新闻详情图集(图集的上下左右拖动及动画效果)功能,也有个这样的新需求: 手势GestureDetector+ OnTouch()事件分发+View绘制+View动画(渐变+位移) > 图片拖拽或视频拖拽 Android 仿微信朋友圈...
  • 因为项目需要 所以要用到拖动功能 说实话个人认为 这个插件的功能还是蛮强大的 基本上 正常开发需要的功能都有 好了话不多说 直接介绍功能 该表格有两种体现形式 vxe-grid 和 vxe-table 这个两种 如果想提高页面渲染...
  • 包含js文件,以及一个html使用该js的实例!
  • 在页面head里加上: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" /> <meta name="apple-mobile-web-app-...
  • HTML5 -canvas拖拽、移动 绘制图片可操作移动,拖动

    万次阅读 热门讨论 2018-01-12 12:04:09
    关于canvas 的基础知识就不多说了,可以进这个网址学习 ... 对于canvas 和 SVG 其实一开始个人是比较倾向于SVG多一点,不过后来工作需要,又学习了下canvas, 这两个之间主要不同是 canvas是在JavaScript中绘制,SVG...
  • 写了好几次的PC端和移动端的拖拽效果了,每次都要重新查阅资料,现在做个总结记录,方便以后随时查阅 要想写拖拽事件,首先得了解三块知识点: PC的鼠标拖动事件 移动端的手指事件 能拿到被移动元素的高宽,距离可...

空空如也

1 2 3 4 5 ... 20
收藏数 88,611
精华内容 35,444
关键字:

拖动