<!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. SpringBoot整合Ribbon注入RestTemplate实例找不到原因

    通过把@LoadBalanced注解放在创建RestTemplate对象的方法上,可以正常运行:如果放在属性上,会导致找不到RestTemplate Bean

  2. ORACLE PL/SQL 实例精解之第六章 迭代控制之一

    6.1 简单循环 简单循环,就想其名称一张,是一种最基本循环.简单循环具有如下结构 LOOP STATEMENT 1; STATEMENT 2; ... STATEMENT N; END LOOP; ...

  3. C#读取大文件

    有些时候需要读取文件,小文件的时候效率的影响可以忽略,但是当文件上M,上G的时候,这个时候,效率问题就非常重要了,下面将对一个3G的文件,用C#的方式读取,对比效率的影响. 1. FileStream ...

  4. MVC 感触

    这几天接触了下 ef+ MVC+WEBAPI +bootstrop VIEW--->Controller  -->WebAPI  ---Model (Linq) 记住 VIEW里的 csh ...

  5. queue POJ 2259 Team Queue

    题目传送门 题意:先给出一些小组成员,然后开始排队.若前面的人中有相同小组的人的话,直接插队排在同小组的最后一个,否则只能排在最后面.现在有排队和出队的操作. 分析:这题关键是将队列按照组数分组,用另 ...

  6. [在读]HTML5程序设计（第二版）

    去年买的,看了30%不到,之后一直是搁置状态,内容还不错,确确实实纯粹讲H5的.

  7. Backbone学习记录（5）

    数据与服务器 var User=Backbone.Model.extend({ defaults:{ name:'susan', age:18 }, url:'/user'//数据提交的路径 }); ...

  8. CentOS 7.2最小化安装没有ifconfig命令，使用yum provides ifconfig找不到相关的包

    [root@sishen yum.repos.d]# yum provides ifconfig Loaded plugins: fastestmirror Loading mirror speeds ...

  9. PowerShell~文件操作和对象遍历

    ps提供了丰富的文件操作,如建立,删除,改名,移动,复制,文件夹建立,显示文件列表,同时对数组对象的遍历也很方便,如果在使用PS脚本时,希望现时传入参数,可以把参数声明为param,当然需要把它写在文 ...

  10. 动手实现 React-redux（五）：Provider

    我们要把 context 相关的代码从所有业务组件中清除出去,现在的代码里面还有一个地方是被污染的.那就是 src/index.js 里面的 Index: ... class Index extend ...