文件拖拽

$(function() {
    drag.init(‘divall‘);
});
var drag = {
    class_name: null, //允许放置的容器
    permitDrag: false, //是否允许移动标识

    _x: 0, //节点x坐标
    _y: 0, //节点y坐标
    _left: 0, //光标与节点坐标的距离
    _top: 0, //光标与节点坐标的距离

    old_elm: null, //拖拽原节点
    tmp_elm: null, //跟随光标移动的临时节点
    new_elm: null, //拖拽完成后添加的新节点

    //初始化
    init: function(className) {
        //允许拖拽节点的父容器的classname(可按照需要,修改为id或其他)
        drag.class_name = className;
        //监听鼠标按下事件,动态绑定要拖拽的节点(因为节点可能是动态添加的)
        $(‘.‘ + drag.class_name).on(‘mousedown‘, ‘.filetxtli‘, function(event) {
            //当在允许拖拽的节点上监听到点击事件,将标识设置为可以拖拽
            drag.permitDrag = true;
            //获取到拖拽的原节点对象
            drag.old_elm = $(this);
            //执行开始拖拽的操作
            drag.mousedown(event);
            return false;
        });
        //监听鼠标移动
        $(document).mousemove(function(event) {
            //判断拖拽标识是否为允许,否则不进行操作
            if (!drag.permitDrag) return false;
            //执行移动的操作
            drag.mousemove(event);
            return false;
        });

        //监听鼠标放开
        $(document).mouseup(function(event) {
            //判断拖拽标识是否为允许,否则不进行操作
            if (!drag.permitDrag) return false;
            //拖拽结束后恢复标识到初始状态
            drag.permitDrag = false;
            //执行拖拽结束后的操作
            drag.mouseup(event);
            return false;
        });
    },

    //按下鼠标 执行的操作
    mousedown: function(event) {
        var key = event.which;
        if (key == 1) {
            //1.克隆临时节点,跟随鼠标进行移动
            drag.tmp_elm = $(drag.old_elm).clone();
            //2.计算 节点 和 光标 的坐标
            drag._x = $(drag.old_elm).offset().left;
            drag._y = $(drag.old_elm).offset().top;
            console.log(‘节点坐标~~drag._x,drag._y‘, drag._x, drag._y);
            var e = event || window.event;
            drag._left = e.pageX - drag._x;
            drag._top = e.pageY - drag._y;
            console.log(‘光标坐标~~drag._left,drag._top‘, drag._left, drag._top);
            //3.修改克隆节点的坐标,实现跟随鼠标进行移动的效果
            $(drag.tmp_elm).css({
                ‘position‘: ‘absolute‘,
                ‘opacity‘: ‘0‘,
            });
            //4.添加临时节点
            tmp = $(drag.old_elm).parent().append(drag.tmp_elm);
            drag.tmp_elm = $(tmp).find(drag.tmp_elm);
            $(drag.tmp_elm).css(‘cursor‘, ‘move‘);
        }
    },

    //移动鼠标 执行的操作
    mousemove: function(event) {
        //2.计算坐标
        var e = event || window.event;
        var x = e.pageX - drag._left;
        var y = e.pageY - drag._top;
        var maxL = $(document).width() - $(drag.old_elm).outerWidth();
        var maxT = $(document).height() - $(drag.old_elm).outerHeight();
        //不允许超出浏览器范围
        x = x < 0 ? 0 : x;
        x = x > maxL ? maxL : x;
        y = y < 0 ? 0 : y;
        y = y > maxT ? maxT : y;
        //3.修改克隆节点的坐标
        $(drag.tmp_elm).css({
            ‘position‘: ‘absolute‘,
            ‘opacity‘: ‘0.5‘,
            ‘left‘: x,
            ‘top‘: y,
        });
        //判断当前容器是否允许放置节点
        $.each($(‘.‘ + drag.class_name + ‘ .fileli‘), function(index, value) {
            //获取容器的坐标范围 (区域)
            var box_x = $(value).offset().left; //容器左上角x坐标
            var box_y = $(value).offset().top; //容器左上角y坐标
            var box_width = $(value).outerWidth(); //容器宽
            var box_height = $(value).outerHeight(); //容器高
            //给可以放置的容器加背景色
            if (e.pageX > box_x && e.pageX < box_x - 0 + box_width && e.pageY > box_y && e.pageY < box_y - 0 + box_height) {
                //判断是否不在原来的容器下(使用坐标进行判断:x、y任意一个坐标不等于原坐标,则表示不是原来的容器)
                if ($(value).offset().left !== drag.old_elm.parent().offset().left ||
                    $(value).offset().top !== drag.old_elm.parent().offset().top) {
                    console.log(‘$(value)~~‘, $(value).attr(‘id‘));
                    $(value).addClass(‘bgclocrc‘);
                }
            } else {
                $(value).removeClass(‘bgclocrc‘);
            }

        });

    },

    //放开鼠标 执行的操作
    mouseup: function(event) {
        //移除临时节点
        $(drag.tmp_elm).remove();
        //判断所在区域是否允许放置节点
        var e = event || window.event;
        $.each($(‘.‘ + drag.class_name + ‘ .fileli‘), function(index, value) {
            //获取容器的坐标范围 (区域)
            var box_x = $(value).offset().left; //容器左上角x坐标
            var box_y = $(value).offset().top; //容器左上角y坐标
            var box_width = $(value).outerWidth(); //容器宽
            var box_height = $(value).outerHeight(); //容器高
            //判断放开鼠标位置是否想允许放置的容器范围内
            if (e.pageX > box_x && e.pageX < box_x - 0 + box_width && e.pageY > box_y && e.pageY < box_y - 0 + box_height) {
                //判断是否不在原来的容器下(使用坐标进行判断:x、y任意一个坐标不等于原坐标,则表示不是原来的容器)
                if ($(value).offset().left !== drag.old_elm.parent().offset().left ||
                    $(value).offset().top !== drag.old_elm.parent().offset().top) {
                    //向目标容器添加节点并删除原节点
                    tmp = $(drag.old_elm).clone();
                    // var newObj = $(value).append(tmp);
                    $(drag.old_elm).remove();
                    //获取新添加节点的对象
                    // drag.new_elm = $(newObj).find(tmp);
                }
            }
            // $(value).css({‘border‘:‘1px solid #fff‘,‘background‘:‘#ebebeb‘});
        });

    }

};
时间: 2024-10-13 08:05:42

文件拖拽的相关文章

文件拖拽上传

1 <style> 2 div{ 3 width: 300px; 4 height: 300px; 5 border:1px dashed #000; 6 position:absolute; 7 top: 50%; 8 left: 50%; 9 margin:-150px 0 0 -150px; 10 text-align:center; 11 font:20px/300px '微软雅黑'; 12 display:none; 13 } 14 </style> 15 <scr

文件拖拽功能失效,原来是UAC把它过滤了

碰到这样一个问题,文件拖拽功能在没有以管理员身份运行的时候是正常的,但是一旦使用管理员身份运行,这个功能就失效了,搜索了好久总算找到原因了. 在window visa以上版本里引入了用户账户控制(UAC),在管理员权限上会过滤掉一些窗口消息,文件拖拽正好也也被过滤了,解决的方法就是使用ChangeWindowMessageFilterEx()解除过滤 //解除window7以上窗口对该消息的过滤 ChangeWindowMessageFilterEx(hwndDlg, WM_DROPFILES,

wxpython实现文件拖拽

我想让wx.grid里面的单元格能够支持文件拖拽,实现起来挺简单的,共分3步: 1.创建一个wx.FileDropTarget子类的对象,并把要支持拖拽的控件传给它的构造函数,此处是grid 2.调用grid的SetDropTarget函数,并将第1步创建的wx.FileDropTarget子类对象传给它 3.实现第1步创建的wx.FileDropTarget的子类,并覆盖OnDropFiles函数 贴出代码如下: import wx import wx.grid import logging

VC++ 文件拖拽功能实现

使用过QQ的人都知道,只要把文件拖拽到消息框中就可以传送文件了.那么这种功能是如何实现的呢?其实很简单,只需要响应一个WM_DROPFILES消息就可以了. 在基于对话框的程序中,默认是没有这个消息的,按下Ctrl+W,弹出类向导对话框,选择Class Info标签,在Message fileter下拉列表中选择Window,然后再点击Message Maps标签,就出现WM_DROPFILES消息了,添加该消息的响应函数: void CTestDlg::OnDropFiles(HDROP hD

CEdit添加右键菜单, ClistCtrl接收文件拖拽

CEdit接收文件拖拽很容易,但ClistCtrl却很难: CListCtrl添加右键菜单很容易,而CEdit却很难. 这种功能不全面,阴差阳错的感觉让人很头疼. 下面介绍一下 CEdit添加右键菜单 和 CListCtrl接收文件拖拽的方法 1. CEdit 添加右键菜单 从CEdit派生出一个类CMyEdit,添加消息ON_WM_CONTEXTMENU(),响应消息函数OnContextMenu().如下: 类定义: //自定义CMyEdit //目的为了实现CEdit添加右键菜单 clas

Linux下安装VMware Tools(使虚拟机支持文件拖拽)

如图点击虚拟机找到安装VMware Tools选项,点击后会在虚拟机桌面显示一个光盘,双击进入如下页面: 选择压缩包将其复制放入Home中不带中文的文件夹: 打开终端,输入cd命令进入文件夹,将压缩包解压: tar -xzf VMwareTools-xx.x.xx-xxxxxxx.tar.gz //xx为自己的Tools版本号 解压后按照以下输入命令行进入安装过程: 遇到选项输入空格即默认选项即可 一直到显示下图则安装完成,此时重启即可实现虚拟机与本机间文件拖拽: 原文地址:https://ww

HTML5拖拽——将本地文件拖拽到网页中显示

HTML5标准中的提供的用于文件输入输出(I/O)的对象 File: 代表一个文件对象 FileList: 代表一个文件列表,类数组对象 FileReader 用于从文件中提取内容 FileWrite 用于向文件中写入类容 这些对象需要在 H5的拖拽事件中通过 e.dataTransfer 来访问和获取 完成效果如下: Data URL给了我们一种很巧妙的将图片"嵌入"到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换

SpringMvc+jQuery 文件拖拽上传、选择上传

最近做了个简易的文件上传功能,jsp版本的,后续会完善更多的功能,不过现在已经能用了,需要的小伙伴,直接引用下面的文件内容直接copy到自己的项目中就ok了,效果如图: fileupload.css: .fileupload_box { position:relative; width: 100%; height: 100%; border: 3px dashed #E5E5E5; text-align: center; z-index: 2000; cursor: pointer; margi

win32使用文件拖拽

在win32程序中,使用文件进行拖拽的操作,是很常见的(不否定有的人喜欢用按钮来打开) 其实在程序中使用拖拽,很简单,只需要在创建窗口的时候使用WS_EX_ACCEPTFILES标识符,然后使用一个消息函数去处理(当然,这是属于窗口的扩展风格,所以需要使用CreateWindowEx来创建): hWnd = CreateWindowEx(WS_EX_ACCEPTFILES, szWindowClass, szTitle, WS_OVERLAPPEDWINDOW, CW_USEDEFAULT, 0

Dropzone.js实现文件拖拽上传

dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 查看演示 下载源码 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone">&l