jQuery 拖拽和绘制

关键词：

【中文标题】jQuery 拖拽和绘制【英文标题】：jQuery drag and draw 【发布时间】：2012-02-11 16:15:03 【问题描述】：

我正在尝试构建一个 jQuery 插件，它允许您拖动和绘制一个矩形（或带边框的 div），但我不知道该怎么做。我不知道目前有任何人有这种能力，所以我不知道在哪里可以找到如何做到这一点的例子。

如何在jQuery中实现拖拽？

【问题讨论】：

【参考方案1】：

这样的事情的基础很简单，仔细想想：

监听某个容器上的mousedown事件（可能是整个文档）； 使用来自event 对象（e.pageX 和e.pageY）的鼠标坐标，将绝对定位的元素放置在鼠标位置； 开始监听mousemove事件以改变width和height对象（基于鼠标坐标）； 侦听mouseup 事件以分离mousemove 事件侦听器。

上述绝对放置的元素是，例如，带有边框的<div> 和background: transparent。

更新：这是一个例子：

$(function() 
    var $container = $('#container');
    var $selection = $('<div>').addClass('selection-box');

    $container.on('mousedown', function(e) 
        var click_y = e.pageY;
        var click_x = e.pageX;

        $selection.css(
          'top':    click_y,
          'left':   click_x,
          'width':  0,
          'height': 0
        );
        $selection.appendTo($container);

        $container.on('mousemove', function(e) 
            var move_x = e.pageX,
                move_y = e.pageY,
                width  = Math.abs(move_x - click_x),
                height = Math.abs(move_y - click_y),
                new_x, new_y;

            new_x = (move_x < click_x) ? (click_x - width) : click_x;
            new_y = (move_y < click_y) ? (click_y - height) : click_y;

            $selection.css(
              'width': width,
              'height': height,
              'top': new_y,
              'left': new_x
            );
        ).on('mouseup', function(e) 
            $container.off('mousemove');
            $selection.remove();
        );
    );
);

演示：http://jsbin.com/ireqix/226/

【讨论】：

为了大家的关注，我更新了你的答案，解决了向不同方向拖动的问题。 我需要这样的东西来快速 html 图像映射器（矩形只适合我的需要）。包含上述双向拖动更改，并输出 html 图像地图源。 jsbin.com/ireqix/91 当您快速移动选择框（但仍在文档区域内）时，原点位置有时会变得混乱，但当您继续移动时，它似乎会弹回正确的位置。例如，如果您左右来回移动，最终原点位置会发生偏移。知道为什么会这样吗？ 我认为问题在于当鼠标从原点​​向左移动时，x 位置（但同样适用于 y 坐标）向左调整，但在鼠标再次向右移动。放置一个将 x 位置设置回原始 click_x 的 else 子句似乎可以解决这个问题。 @chinabuffet 你说得对。我稍微重写了代码以规避这个问题。感谢您的提醒！【参考方案2】：

$("#YOUR_ELEMENT_ID").on("mousedown", function (e) 
    var click_x = e.pageX;
    var click_y = e.pageY;

    /* Posição do objeto */
    var x = parseFloat($(this).css("left").replace("px", "")),
        y = parseFloat($(this).css("top").replace("px", ""));
    /* Calcula distância no eixo x */
    var distanc_x = Math.abs(x - click_x);
    var distanc_y = Math.abs(y - click_y);

    $("#YOUR_ELEMENT_ID")
        .on("mousemove", function (e) 

            var new_x = e.pageX - distanc_x;
            var new_y = e.pageY - distanc_y;

            $(this).css(
                top: new_y,
                left: new_x,
            );

        ).on("mouseup", function (e) 
        $(this).off("mousemove");
    );

);

【讨论】：

可拖拽和带预览图的jquery文件上传插件ssi-uploader

插件描述：ssi-uploader是一款带预览图并且可以拖拽文件的jQueryajax文件上传插件。该文件上传插件支持AJAX，支持多文件上传，可控制上的文件格式和文件大小，提供各种回调函数，使用非常方便。简要教程ssi-uploader是一款带预览... 查看详情

table表格列顺序拖拽和列宽度拖拽

目前项目要求对表格可进行宽度拖拽和排序拖拽。用的第三方库库ant-desigin-vue。对于列宽度拖拽在ant-desigin-vue的table示例中有对应的案例，但是直接复制代码，会报错。最后看了源代码，对案例代码进行了修改。安装第三方库npmi... 查看详情

拖拽和自定义播放器

今天用到了拖拽,这个是在h5中的,拖拽其实拖得是标签,把标签当做一个全局变量,你想拖到哪儿就拖到哪儿,我们知道的标签中的img是默认支持拖拽的,所以不要设置属性,但其他的就要设置一个属性才能实现拖拽:必须要有draggable=true... 查看详情

单点拖拽和多点多拽

demo见github:https://github.com/fei1314/drag/tree/master一、拖拽原理手指所处的位置到一个div顶部的距离L一直不变。二、单点拖拽1.touchstart:单指按下2.touchmove：单指移动3.touchend：单指抬起a.在touchstart事件中，利用拖拽原理，先保存手指到d... 查看详情

设置zedgraph鼠标拖拽和局部放大属性转

设置zedgraph鼠标拖拽和局部放大属性转 设置zedgraph鼠标拖拽和局部放大属性 说一下几个属性的意义和具体应用:(1)鼠标拖拽显示区域PanModifierKeys->>Getsorsetsavaluethatdetermineswhichmodifierkeyswillbeusedasaprimaryoptiontotriggerapanevent.... 查看详情

svg拖拽和缩放(代码片段)

需求:做机房平面图,用svg实现拖拽和缩放,刚开始一头雾水,不知所措,好在皇天不负有心人........本文重点介绍拖拽,单纯实现很简单,但是由于vue项目,机房图有很多事件,拖拽就成了难点简单介绍下缩放实现技术要点:1.获取Svg当前缩... 查看详情

js实现拖拽和放大图片

...较好的都会有上传头像后对这个图片做编辑的功能，比如拖拽图片显示范围，或者放大图片。像QQ的头像设置、淘宝等商场的上传图片设置。现在本人参与的项目也需要实现这个功能，花了两天时间在页面实现了图片拖拽和方法... 查看详情

nomad拖拽和移动有啥区别

参考技术A拖拽相当于复制粘贴，移动相当于剪切粘贴。触碰笔刷沿着笔划方向移动网格点，图章笔刷这个工具可以理解为一个笔触模式设置为拖拽动态半径的标准笔刷工具。Nomad是一个基于多边形网格软件，它使用三角形和四边... 查看详情

pythoncanvas拖拽和移动\事件

参考技术A"""drawelasticshapesonacanvasondrag,moveonrightclick;seecanvasDraw_tags*.pyforextensionswithtagsandanimation"""fromtkinterimport*trace=FalseclassCanvasEventsDemo:definit(self,parent=None):canvas=Canvas(width=300,height=300,bg=\'beige\')canvas.pack()canvas.bind(\'<ButtonPress-1>\',... 查看详情

第八章d3拖拽和事件及缩放

参考技术A简单的拖拽举例drag.container(svg)//设置拖拽事件的相对父元素方法通常情况下不直接调用指定的值直接就是最终的缩放大小.当前基础上进行的，会累积.extent设置视口的范围。extent以[[x0,y0],[x1,y1]]的形式定义。[x0,y0]表示视... 查看详情

d3.jssvg可以同时加拖拽和缩放事件吗

参考技术A代码vargroup=this.d3svg.selectAll('g'+'.'+this.className).attr('x',this.drawFuncs['x']).attr('y',this.drawFuncs['y']).attr("transform",this.drawFuncs['translate']).attr('class',this.className).call(gDragBehav).o... 查看详情

android一步一步带你实现recyclerview的拖拽和侧滑删除功能

先上效果图： 本篇文章我们来学习一个开源项目Android-ItemTouchHelper-Demo 这个项目使用了RecyclerView的ItemTouchHelper类实现了Item的拖动和删除功能，ItemTouchHelper是v7包下的一个类，我们看一下他的介绍Thisisautilityclasstoaddswip... 查看详情

想用vb做个排座位软件，实现了两个文本框的拖拽和位置互换，但50多个的用这个办法显然不行。望高手指点。

...做个排座位软件，用一个很蠢的办法实现了两个文本框的拖拽和位置互换，但50多个文本框的拖拽和互换，用这个办法显然不行。望高手指点。PrivateDeclareFunctionReleaseCaptureLib"user32"()AsLongPrivateDeclareFunctionSendMessageLib"user3... 查看详情

vue3-directives自定义指令做个聊天窗口拖拽和拖拽按钮(代码片段)

<buttonv-focusstyle="position:absolute">drag</button>directives:focus://指令的定义mounted(el,binding,vnode)/**el可以获取当前dom节点，并且进行编译，也可以操作事件**//**binding指的是一个对象，一般不用**//**vnode是Vue编译... 查看详情

vue3中实现拖拽和缩放自定义看板vue-grid-layout(代码片段)

VueGridLayout官方文档VueGridLayout中文文档1.npm下载拖拽缩放库npminstallvue-grid-layout@3.0.0-beta1--save2. vue3使用vue-grid-layout报错：external_commonjs_vue_commonjs2_vue_root_Vue_default.aisnotaconstructor 解决方案: vue3版本记得下载对应vue-grid-layout... 查看详情

jquery移动端手指拖拽div四个边框，可上下左右随意拉伸调节div大小

就是在移动式实现拖拽和div随意的拉伸参考技术AjQuery拖拽通过八个点改变div大小js:(function($)/***默认参数*/vardefaultOpts=stage:document,//舞台item:'resize-item',//可缩放的类名;/***定义类*/varZResize=function(options)this.options=$.extend(,defaultOp... 查看详情

四角拖拽-文本可伸缩

女朋友公司需求，要求做一个可以拖拽和伸缩的盒子，还挺急的，她暂时没什么头绪，交到我这了，┭┮﹏┭┮，写吧，熬了几天夜，可算是写出来了首先去GitHub找拖拽放大相关的Demo，找到，哈哈。为方便大家使用，我把源码... 查看详情

拖拖拽拽之间，用python绘制了发表级图表(代码片段)

今天分享一个工具sviewgui，拖拽之间使用Python的Matplotlib、Seaborn。sviewgui是一个PyQt5GUI，底层为Matplotlib、Seaborn；可拖拽csv文件或者pandas读入DataFrame作图，结果可导出高清PDF。1、sviewgui安装pipinstall sviewgui2、sviewgu 查看详情