原生JS实现图标图片拖拽

实现功能:

原生JS实现图标图拖拽,拖拽的过程中不断输出该div的left、top值。

用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用,

css样式如下

   #div1{
       width: 100px; height: 100px;
       background-color: #4D4D4D;
       position: absolute; cursor: pointer;
       -webkit-box-shadow: 3px 3px 0px 3px #C7C7C7;
       box-shadow: 3px 3px 3px 0px #C7C7C7;
   }
   #parent{
       width: 500px; height: 500px;
       border: 1px solid #CDCDCD;
       position: relative; margin: 0 auto;   //父级元素设置为:
       background-color: #F4F4F4;
   }
   .postText{
       width: 500px; height: 30px;margin: 0 auto; background-color: #F4F4F4;
   }
   .postText span{
      padding:0px 10px;
   }

html代码如下

<div id="parent">
    <div id="div1" onmousemove="posMove(this.id)"></div>
</div>
<div class="postText">
   移动的距离Top:<span id="posTop"></span>Left:<span id="posLeft"></span>
</div>

js代码及注释如下:

function posMove(getdivid) {
        var oDiv = document.getElementById(getdivid);
        var oParent = document.getElementById(‘parent‘);
        var sent = {
            l: 10,  //设置div在父元素的活动范围,10相当于给父div设置padding-left:10;
            r: oParent.offsetWidth - oDiv.offsetWidth,  // offsetWidth:当前对象的宽度, offsetWidth = width+padding+border
            t: 10,
            b: oParent.offsetHeight - oDiv.offsetHeight,
            n: 10
        }
        drag(oDiv, sent);
    }

   /**
     *
     * @param obj:被拖动的div
     * @param sent :设置div在容器中可以被拖动的区域
     * 原作者的插件下载地址如下: http://www.jq22.com/jquery-info4543
     */
    function drag(obj,sent){

        var dmW = document.documentElement.clientWidth || document.body.clientWidth;
        var dmH = document.documentElement.clientHeight || document.body.clientHeight;

        var sent = sent || {};
        var l = sent.l || 0;
        var r = sent.r || dmW - obj.offsetWidth;
        var t = sent.t || 0;
        var b = sent.b || dmH - obj.offsetHeight;
        var n = sent.n || 10;

        obj.onmousedown = function (ev){
            var oEvent = ev || event;
            var sentX = oEvent.clientX - obj.offsetLeft;
            var sentY = oEvent.clientY - obj.offsetTop;

            document.onmousemove = function (ev){
                var oEvent = ev || event;

                var slideLeft = oEvent.clientX - sentX;
                var slideTop = oEvent.clientY - sentY;

                if(slideLeft <= l){
                    slideLeft = l;
                }
                if(slideLeft >= r){
                    slideLeft = r;
                }
                if(slideTop <= t){
                    slideTop = t;
                }
                if(slideTop >= b){
                    slideTop = b;
                }

                obj.style.left = slideLeft + ‘px‘;
                obj.style.top = slideTop + ‘px‘;

                document.getElementById(‘posTop‘).innerHTML = slideTop;
                document.getElementById(‘posLeft‘).innerHTML = slideLeft;

            };
            document.onmouseup = function (){
                document.onmousemove = null;
                document.onmouseup = null;
            }

            return false;
        }
    }

javascript event 对象的clientX,offsetX,screenX,pageX的区别

ps: 若有错误,请指出,谢谢,大家共同学习进步~~~

时间: 2024-11-05 02:19:32

原生JS实现图标图片拖拽的相关文章

HTML5多图片拖拽上传带进度条

前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载完毕,还是window.onload之后算呢,对这些方面,我真不敢随意回答,因业务需求而定,本文想要说的是在图片上传的时候用到的进度条. 效果展示 详细参考请移步至html5demo HTML5 新增的拖拽相关事件说明 1.ondragover 效果图演示是所看见的可以将文件不仅仅是图片拖拽到该di

图片拖拽上传至服务器

今天遇到一个新的问题,就是图片拖拽上传至服务器,一般,我们会想到使用ajax,但是现在问题是ajax默认是没有提交事件的,也就是说,我们拖拽上传图片后,没法将上传的图片信息发送到服务器,这时候就要模拟form表单的提交了. 既然要上传,这里首先要讲到的就是图片拖拽上传了. oDiv.ondrop = function(e) { e.preventDefault(); //获取拖拽过来的对象,文件对象集合 var fs = e.dataTransfer.files; //若为表单域中的file标签

图片拖拽原生js

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>拖拽原生js</title> <style>      #box1{      width: 100px;      height: 100px;      background-color: #ffff00;      position: abso

js仿百度地图拖拽、缩放、添加图层功能(原创)

最近项目中完成的需求,仿百度地图中的功能: 要求:1.底层图可以拖拽.缩放.     2.拖拽一个图标,在底层图上对应位置添加一个标注点,该标注点位置要随底层图移动. 3.添加的标注点,可以拖动,删除. 主要知识点和难点就是各个浏览器的点击.拖拽.缩放事件兼容性,对js运动属性.运动偏移位置的了解,以及js面向对象的应用. 这里跟大家分享一下完成后的代码. html代码主要知识点就是运动元素和底层元素的相对绝对定位,css代码不再贴出: <div id="warp" style=

图片拖拽上传

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="html5/js/jquery-2.0.0.min.js"></script> </head> <body> <div name="image" id=&quo

JS利用 Sea.js 实现模块化:拖拽、缩放及范围限制

知识点总结: Sea.js的使用:define.export.seajs.use.require等方法:   参考:http://seajs.org/docs/ Sea.js与require.js的区别: 鼠标事件及位置的使用:mousedown.mousemove.mouseup.ev.clientX.ev.clientY: 初始化模块.拖拽模块.缩放模块.范围限制模块的实现. 一.index页面 <!DOCTYPE html> <html lang="en">

HTML5——将图片拖拽上传

如下图所示: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{width:200px;height:200px;background:red;} </style> <script type="te

Winform图片拖拽与缩放

最近做项目的时候遇到上传施工平面布置图,查看,因为图片比较大,一般的显示器分辨率无法显示全,然后还需要放大看清楚图片里面的文字内容,所以需要用到图片的拖拽与缩放功能.这里整理下具体操作. 首先新建一个窗体,拖一个panel控件到窗体中,然后在拖一个pictureobx控件到panel中,然后在添加个上传图片的按钮: 具体代码: using System; using System.Collections.Generic; using System.ComponentModel; using Sy

cookie结合js 实现记住的拖拽

哈喽!!!我胡汉三又回来啦!!!有木有记挂挪啊!咱们今天说一个 cookie结合JS的小案例哦! 话不多说直接上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #drag { width: 200px; height: 200px; text-align: center; line-heig