<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        .nav {
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .title {
            width: 100%;
            height: 20px;
            background-color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="title">hello 主人 拖我试试看</div>
        <div>
            我是内容。。。。
        </div>
    </div>
    <script src="../plugins/jquery/jquery-1.10.1.min.js"></script>
    <script src="../plugins/jquery/jquery-ui.min.js"></script>
    <script src="../plugins/jquery/jquery.ui.touch-punch.js"></script>
    <script>
        $(".nav").draggable({
            handle: ".title"
        });
    </script>
</body>
</html>

拖拽功能-jquery的更多相关文章

  1. JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

  2. JQuery UI的拖拽功能实现方法小结

    JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...

  3. js进阶 12-17 jquery实现鼠标左键按下拖拽功能

    js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...

  4. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  5. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  6. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  7. vuejs2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

  8. sortable实现拖拽功能

    使用sortable这个强力插件就很容易实现拖拽功能,它是目前比较牛逼的拖拽插件,无需jquery,就可以全面支持pc和移动,参考以下github文档就有很详细的说明,也给了很多 demo,插件就用我 ...

  9. vue2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

随机推荐

  1. Playground Tutorial

    In this step by step tutorial we'll walk through setting up a business network, defining our assets, ...

  2. Android—— ListView 的简单用法及定制ListView界面

    一.ListView的简单用法 2. 训练目标 1) 掌握 ListView 控件的使用 2) 掌握 Adapter 桥梁的作用 实现步骤: 1)首先新建一个项目, 并让ADT 自动帮我们创建好活动. ...

  3. C++开发工程师面试题库 150~200道

    151.简述需求分析的过程和意义 152.网状.层次数据模型与关系数据模型的最大的区别是什末 153.软件质量保证体系是什末 国家标准中与质量保证管理相关的几个标准是什末 编号和全称是什末号和全称是什 ...

  4. vs2010中的ADO控件及绑定控件

    要在项目中添加某一个ActiveX控件,则该ActiveX控件必须要注册.由于VS2010中,并没有自动注册ADO及ADO数据绑定控件(Microsoft ADO Data Control,Micro ...

  5. sybase修改默认字符集为cp936

    原文地址:http://blog.sina.com.cn/s/blog_4d6854860100xn3f.html 报错信息:2402 error converting characters into ...

  6. HDFS Java API

    HDFS Java API 搭建Hadoop客户端与Java访问HDFS集群

  7. Keepalived+LVS(DR)+MySQL

    实验环境 主机名 IP VIP 服务 主备 KA_LV_MYSQL_01 192.168.30.130 192.168.30.100 keepalived.LVS.MySQL MASTER KA_LV ...

  8. state vs props

    我们来一个关于 state 和 props 的总结. state 的主要作用是用于组件保存.控制.修改自己的可变状态.state 在组件内部初始化,可以被组件自身修改,而外部不能访问也不能修改.你可以 ...

  9. [转]合理使用ArrayMap代替HashMap

    合理使用ArrayMap代替HashMap 2016年07月08日 15:34:44 阅读数:5938 转载请标注: 披萨大叔的博客 http://blog.csdn.net/qq_27258799/ ...

  10. phpstorm设置代码块快捷方式

    File -> Settings -> Live Templates