图标拖拽效果,兼容所有浏览器

所属分类:UI-拖和放

 38714  374  查看评论 (26)
分享到微信朋友圈
X
图标拖拽效果,兼容所有浏览器 ie兼容6

插件使用很简单,调用drag函数


使用方法

引用

<script src="drag.js"></script>

html

<div id="parent">
    <div id="div1"></div>
</div>

js中调用对应的id即可。

var oDiv = document.getElementById('div1');
var oParent = document.getElementById('parent');


相关插件-拖和放

页面多板块拖动,调整边缘,吸附效果(原创)

接到一个需求:楼宇房间的简单布局:点击左侧房屋号码,到右面出现以后可以各种调整。
  拖和放
 31535  358

jQuery九宫格拖拽效果

九宫格拖拽效果简单上手附带代码注释详解
  拖和放
 29283  315

jQuery刻度尺特效(移动端)

jQuery手指滑动刻度尺选择值特效是一款手机移动端滑动刻度尺代码。
  拖和放
 35736  325

jQuery移动端滑动标尺

移动端卡尺,滑动标尺,标不动
  拖和放
 25251  319

讨论这个项目(26)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    伴随着编程世界长大。 0
    2019/4/1 3:29:56
    没看到是jq插件网吗,还用原生document.getElementById干嘛,对于我们这种连接式的怎么搞,一堆ID同名不同父的,用了jq的$(demo)没用 回复
    ?? 那只包子 0
    2019/1/26 11:40:00
    这个能获取到拖拽的小方块的x、y位置嘛? 回复
    sister 0
    2018/5/8 15:54:51
    流年master 0
    2017/11/10 16:37:15

    多个子集的话在“锾??落?”那个代码的基础上,修改一下:id属性,随便给个不同id就行

    	width: 50px; height: 50px;
    	position: absolute; cursor: pointer;
    }
    
    <div id="num1" class="png1" onmousemove="readys(this.id)"></div>
    <div id="num2" class="png1" onmousemove="readys(this.id)"></div>
    <div id="num3" class="png1" onmousemove="readys(this.id)"></div>
        流年master0
        2017/11/10 16:38:12
        .png1{
        	width: 50px; height: 50px;
        	position: absolute; cursor: pointer;
        }
    回复
    酷冷 0
    2017/9/8 15:58:44

    如果都多个子集都需要拖动呢

    回复
    jqueryBonnie 0
    2016/10/24 14:10:23
    NothingMore 0
    2016/10/20 10:10:19
    这个在移动端没有办法用。只能用在pc端吧 回复
    木槿瑾 0
    2016/9/18 17:09:51
    为什么自己弄完根本就没反应呢,是哪里出了问题 回复
    star0708 0
    2016/6/25 9:06:47
    很好用!!!
        对方正在输入......0
        2017/3/29 15:03:02

        是吗

    回复
    Jealee 0
    2016/1/28 10:01:17
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复