jq 拖拽

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{
    background:pink;
    height:100px;
    width:100px;
    position:absolute;
    }
</style>
<script type="text/javascript" src="jquery-1.11.2.js" ></script>
<script>
    $(function ()
    {
        var disX = 0;
        var disY = 0;
        $(‘div‘).mousedown(function (ev)
        {
            disX = ev.pageX - $(this).offset().left;
            disY = ev.pageY - $(this).offset().top;
            $(document).mouseover(function (ev)
            {
                $(‘div‘).css(‘left‘,ev.pageX - disX);
                $(‘div‘).css(‘top‘,ev.pageY - disY);
            })

            $(document).mouseup(function ()
            {
                $(document).off();
            })
        })
    })
</script>
</head>

<body>
<div></div>
</body>
</html>
时间: 2024-10-12 03:46:17

jq 拖拽的相关文章

jQ插件--时间线插件和拖拽API

这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接,  那个三角会滚动, 然后左侧的界面也会滚动: 实际的效果如下图,用户点击左侧的按钮或者右侧的input,滚动条都会主动滚动, 这里有个小技巧就是用after和before伪类生成三角形, 用户点击按钮的滚动效果直接用jq的animate方法: 点击查看DEMO:打开 <!-- //设置内容; window.onWebMessage( '{"ty

JQ实现3D拖拽效果

1 <!DOCTYPE HTML> 2 <html onselectstart='return false'> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 5 <meta name="keywords" content="" /> 6 <meta

Jquery 多行拖拽图片排序 jq优化

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery图片拖动排序代码</title> <style type="text/css"> .item_container{position:relative;height:auto;overflow:hidden;} .item_content ul{list-

基于 jq 实现拖拽上传 APK 文件,js解析 APK 信息

技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 -- app-info-parser 支持功能 点击或拖拽上传 apk 文件 校验文件类型及文件大小 js 解析 apk 文件信息展示并通过上传接口提交给后端 支持上传过程中取消上传 支持上传成功显示上传信息 支持解析.上传等友好提示 支持从历史记录(所有已上传文件)中选择一个 支持假文件处理,比如

自己写一个jqery的拖拽插件

说实话,jQuery比原生的js好用多了,本来想用原生写的,也写出来的,只是,感觉不像插件,所以用jQuery实现了一版. 实现的功能:可以指定拖拽的边界,在拖拽过程中,可以触发几个自定义事件 先说明一下我写的插件的原则: 1.常量分离出来,放在$.zUI.插件中 2.插件的主体执行函数命名为$.zUI.插件.fn 3.销毁函数命名为$.zUI.插件.unfn 这些规范,主要是为了以后写其他插件时,放在一起,精简代码用的,以后可能还会增加其他规则,以写出一个骨架来. 拖拽的原理其实比较简单,就是

WEB前端开发学习----11. JQuery 实现简单的拖拽效果

拖拽效果在网页中很常见.实现起来也不难.记录一下今天实现的简单效果. 拖拽演示 快速拖动时,会出现问题,以后修改. 说白了,就是3个点击事件. 1. 按下鼠标左键, 触发点击事件,此时记录下可以得到鼠标相对于拖动控件的位置(当前鼠标位置-控件位置): 2. 拖动鼠标,触发移动事件,可以计算出鼠标移动的距离(当前鼠标位置-之前算出的相对位置),也就是拖拽控件所移动的距离: 3. 鼠标抬起,结束拖动. 在JQ中,event.pageX    event.pageY可以获取鼠标的位置,相对于文档左上角

JQUERY 拖拽 draggable droppable resizable selectable sortable

今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下: <script language="JavaScript" type="text/javascript" src="ui/jquery-1.8.2.js"></script> <script language="JavaScript" type="text/javascript" src="

HTML5拖拽上传图片预览

参考博文1:http://blog.csdn.net/testcs_dn/article/details/8695532 参考博文2:http://justcoding.iteye.com/blog/2105760 1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块

拖拽至购物车

此需求用到了四大功能点,1.重构alert,confirm:2.拖拽功能:3.读取静态json:4.ajax提交产品信息: 此需求要求安装在客户方互动茶几终端上,要求尽量方便,无需配置相关语言环境,纯静态化: alert,confirm,在之前的文章中有详细描述,这边就不再写了. 演示地址:http://120.26.59.104/text/list.html 此项目是展示在大屏本地上,外网访问首次加载可能会慢 1.拖拽使用了jquery插件模式 (function($) { var old =