【拖拽】可拖拽的div

//可拖拽的div
$.extend({
    extDrag: function(Selector_Target, Selector_Hot) { //Selector_Target:目标 , Selector_Hot:热区
        var $target = $(Selector_Target),
            uniqueness = new Date().getTime();
        $(Selector_Hot || $target).mousedown(function(e) {
            var _style = ‘<style>.drag-active{opacity:0.7!important}.drag-mask{position:fixed;height:100%;width:100%;z-index:999999998;background:#fff;opacity:0;filter:alpha(opacity=0);cursor:move}.drag-proxy{position:fixed;z-index:999999999;box-sizing:border-box;border:2px dashed #f00;background:rgba(255,255,0,0.2);cursor:move}</style>‘;
            $(‘body‘).append(‘<div id="‘ + uniqueness + ‘"><div class="drag-mask"></div><div class="drag-proxy">‘ + _style + ‘</div></div>‘);
            var $box = $(‘#‘ + uniqueness),
                $proxy = $box.find(‘div.drag-proxy‘);
            $proxy.css({
                ‘width‘: $target.addClass(‘drag-active‘).outerWidth(),
                ‘height‘: $target.outerHeight(),
                ‘top‘: $target.css(‘top‘),
                ‘left‘: $target.css(‘left‘)
            });
            var _offset = $target.offset();
            var x = e.pageX - _offset.left,
                y = e.pageY - _offset.top,
                left,
                top;
            var fMousemove = function(e) {
                left = e.pageX - x;
                top = e.pageY - y;
                if (top < 0) top = 1;
                $proxy.css({
                    ‘left‘: left,
                    ‘top‘: top
                });
            };
            var fMouseup = function() {
                $target.removeClass(‘drag-active‘).css({
                    ‘left‘: left,
                    ‘top‘: top
                });
                $box.remove();
                $(document).off(‘mousemove‘, fMousemove);
                $(document).off(‘mouseup‘, fMouseup);
            };
            $(document).on(‘mousemove‘, fMousemove);
            $(document).on(‘mouseup‘, fMouseup);
            return false;
        }).css(‘cursor‘, ‘move‘);
    }
});

//使用情况
$.extDrag(‘#Selector_Target‘, ‘#Selector_Hot‘); //参数可以是:字符串 || jQ对象 || DOM对象
时间: 2024-10-04 11:12:58

【拖拽】可拖拽的div的相关文章

c# 实现文件拖入和拖出(拖拽)

摘自:http://www.cnblogs.com/eaglet/archive/2009/01/06/1370149.html C# WinForm下一步一步实现文件的拖入和拖出 作者:Eaglet 在WinForm实现一个类似资源浏览器的功能,需要实现将WinForm中列出的文件拖出到其他应用程序中或者从其他应用程序中将文件拖入到Winform应用中.网上有一些文章介绍这种功能,但都比较零散,缺少一个完整的例子.为此我编写了一个较完整的实现文件拖入和拖出的例子,并撰写此文一步步讲解如果实现类

如何使用Panel来实现一个可以从屏幕边缘拖出或拖进的控制面板

在Ubuntu QML设计中,我们可以使用Panel API来实现一个可以在屏幕边缘拖进或拖出的控制面板.用户只需要在屏幕的边缘滑动即可把Panel显现或影藏出来. 具体的设计非常简单: import QtQuick 2.0 import Ubuntu.Components 1.1 /*! \brief MainView with a Label and Button elements. */ MainView { // objectName for functional testing pur

拖拽图片到另一个div里

HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #taa{width: 300px;height: 300px;background: #DEDEDE;} </style> </head> <body> <

H5拖拽 构造拖拽及缩放 pdf展示

前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思路:H5拖拽及构造函数实现拖拽及缩放 要点:1.需要设置拖拽元素属性 draggable="true" 2.可拖拽的元素设置ondragstart获取数据   3.对可放置拖拽元素的设置ondragover函数 默认地,无法将数据/元素放置到其他元素中.如果需要设置允许放置,我们必须阻止对

iOS UI开发之拖还是不拖

针对手工和非手工来说:纯手写维护方便,适合大型项目多人合作,纯拖拉小项目,个人使用方便,git管理不方便.两者结合兼顾效率和复用,不过多人维护还是有点不方便. 其它: 有的人用代码创建UI,有的人用xib创建UI.到底是用xib还是代码来创建UI,这个问题以前也有过很多争论,我只想说一点,各有各的优点.如果能够将两者融合贯通,那将是更有优势.笔者开发过程中,UI能用xib就尽量用xib(能用storyboard就用storyboard, 一个storyboard里最好别装太多的UIViewCon

理解事件捕获。在限制范围内拖拽div+吸附+事件捕获

一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二.一步步的实现这个拖拽过程的几个要求 (一)拖拽起来 里面的边框是表示页面哦(我们的屏幕所能看到的东东). 获取移动距离的思路: 记录鼠标按下和鼠标抬起两次的坐标,然后相减,再加上div跟边缘之间的间距.就得到移动距离. 之前我也在这里困惑了,不明白为什么还要再加上offsetLeft.原因就是cl

jQuery实现div横向拖拽排序

参考:https://blog.csdn.net/kongjiea/article/details/45578033 效果图: html <h1>div横向拖拽排序</h1> <div class="box"> <div class="horizontal-div" id="div1">div1</div> <div class="horizontal-div"

html5 拖拽练习题

html5新的拖拽 只支持Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 来一个实例: <!DOCTYPE html> <html> <head> <style type="text/css"> table td{ width:120px; height:50px; border:1px solid #000; } table td div.dragDiv{ ma

File杂谈——拖拽上传前传

在<[File杂谈--初识file控件](http://www.seejs.com/archives/668 "File杂谈--初识file控件")>一文中,我们已经对file控件有了初步的了解,并且对制作一个视觉和体验一致的file控件做了较为详细的说明,今天我们继续了解file控件的更多特性,并延伸出更多. ## 新增属性 在HTML5到来之前,绝大多数情况下使用file控件,我们前端工程师需要的有用信息都只能通过value属性获得的文件名字符串来获取(比如:文件类型.

Java实现HTML5拖拽文件上传

这是主页面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+reques