特定一个div禁止拖拽js

2024-11-01

通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

前言关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能并没有处理这些细节,经过翻阅 jquery ui 的源码才找到答案. 拖拽实现关于拖拽功能不再啰嗦,直接贴代码 /** * [draggable 拖拽方法] * @param {[type]} modal [移动元素] * @param {[type]} handle [拖拽元素] */ var

实现一个div的拖拽效果

实现思路: 鼠标按下开始拖拽记录摁下鼠标时的鼠标位置以及元素位置拖动鼠标记下当前鼠标的位置鼠标当前位置-摁下时鼠标位置= 鼠标移动距离元素位置= 鼠标移动距离+鼠标摁下时元素的位置 class Drag { //构造函数 constructor(el) { this.el = el; //鼠标摁下时的元素位置 this.startOffset = {}; //鼠标摁下时的鼠标位置 this.startPoint = {}; let move = (e) => { this.move(e)

js事件处理相关-实现一个div的拖拽

最终代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <style type="text/css"&g

JS实现多Div模块拖拽功能

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

day23—JavaScript实现DIV盒子拖拽（原生方式）

转行学开发,代码100天——2018-04-08 <!doctype html> <html> <head> <meta charset="utf-8"> <title>修改代码,右边会自动显示结果</title>  <meta name="viewport" content="width=device-width, initial-scale

百度地图API示例之设置级别setZoom与禁止拖拽disableDragging

百度地图API示例之设置级别setZoom与禁止拖拽disableDragging 设置级别 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no&q

拖拽js

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>拖拽js</title> <style type="text/css"> html, body { overflow:hidden; } body, div, { margin:0; padding:0; } body {

最好的拖拽js

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>拖拽js</title> <style type="text/css"> html, body { overflow: hidden; } body, div, { margin: 0; padding: 0; } bod

移动端多个DIV简单拖拽功能

移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动端多个DIV拖拽</title> <style> * { padding: 0; margin: 0; } .container { hei

Android高级控件（六）——自定义ListView高仿一个QQ可拖拽列表的实现

Android高级控件(六)--自定义ListView高仿一个QQ可拖拽列表的实现我们做一些好友列表或者商品列表的时候,居多的需求可能就是需要列表拖拽了,而我们选择了ListView,也是因为使用ListView太久远了,导致对他已经有浓厚的感情了,我们之前也是写过几篇关于ListView的博文 Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! Android高级控件(一)--ListView绑定CheckBox实现全选,增加和删除等功能 A

WPF禁止拖拽窗口到边缘自动最大化

近期有个需求,可以通过拖拽改变窗口大小,但是不允许窗口最大化.最小化.拖到边缘的时候也不能自动最大化. 要想禁止拖拽窗口到边缘自动最大化,只要改注册表即可,但是系统所有应用都会被禁止. 1.运行regedit命令,打开注册表管理器 2.找到HKEY_CURRENT_USER -- Control Panel -- Desktop节点,在右侧找到WindowArrangementActive,将值1改为0. 3.注销一下.

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

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

自制一个H5图片拖拽、裁剪插件（原生JS）

前言如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图片拖拽.裁剪的插件.其实网上也有很多类似的插件,只不过有的功能冗余体积大,有的甚至还依赖jquery.索性自己搞一个轻量的,只是不支持缩放功能. DEMO(手机上看效果比较好,PC上没有兼容处理),原码实现这里简略说下实现过程,只截取部分代码片段,有兴趣的可以看下原码,反正也很简单. 图片上传

js 禁止右击保存图片，禁止拖拽图片

禁止鼠标右键保存图片 <img src="" oncontextmenu="return false;"> 禁止鼠标拖动图片 <img src="" ondragstart="return false;"> 文字禁止鼠标选中 <p onselectstart="return false;">文字禁止鼠标选中</p> 禁止复制文本 <p onselect=

简单的div元素拖拽到div

drag1 drag2 drag3 代码如下: <!DOCTYPE HTML> <html> <head> <title>div拖拽到div</title> <script src="jquery.js"></script> <style type="text/css"> #div1, #div2, #div3 { float: left; width: 150px; h

自己写一个jqery的拖拽插件

说实话,jQuery比原生的js好用多了,本来想用原生写的,也写出来的,仅仅是,感觉不像插件,所以用jQuery实现了一版. 实现的功能:能够指定拖拽的边界,在拖拽过程中,能够触发几个自己定义事件先说明一下我写的插件的原则: 1.常量分离出来,放在$.zUI.插件中 2.插件的主体运行函数命名为$.zUI.插件.fn 3.销毁函数命名为$.zUI.插件.unfn 这些规范,主要是为了以后写其它插件时,放在一起,精简代码用的,以后可能还会添加�其它规则,以写出一个骨架来. 拖拽的原理事实上比較简

EasilyUI的一个简单的拖拽功能

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Main" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

jquery实现对div的拖拽功能

<!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> <meta http-equiv="Content-

原生拖拽js利用localstorage保存位置

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

拖拽js和jq写法

第一种原生js写法 window.onload=function () { var oDrag=document.getElementById('drag'); oDrag.onmousedown=function (ev) { var oEvent=ev||event; var disX=oEvent.clientX-oDrag.offsetLeft;//x坐标 var disY=oEvent.clientY-oDrag.offsetTop;//y坐标 document.onmousemove

特定一个div禁止拖拽js

热门专题