<!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. vector理解一波~~~

    Vector: 头文件: #include<vector> using namespacestd; 定义: vector<类型>q;//类同于  "类型 q[];&q ...

  2. android的logcat的message有字符长度的限制,超过将直接截断

    http://blog.csdn.net/qidizi/article/details/47291803 今天想在logcat中输出足够多的调试信息时,发现从logcat中返回的信息中明显少了后面一节 ...

  3. python __builtins__ filter类 （24）

    24.'filter', 用于过滤序列,过滤掉不符合条件的元素,返回由符合条件元素组成的新列表.该接收两个参数,第一个为函数,第二个为序列,序列的每个元素作为参数传递给函数进行判,然后返回 True ...

  4. python iteration 迭代

    可迭代的类型:list,tuple,dict,str,bytes,bytearray等 一.怎么判断一个对象是否可迭代 >>> from collections import Ite ...

  5. P1229-神秘岛

    神秘岛 描述 Description FireDancer来到一个神秘岛,他要从岛的西头到东头然后在东头的码头离开.可是当他走了一次后,发现这个岛的景色非常的美丽,于是他从东头的传送门传到了西头,换了 ...

  6. MyBatsi-Mapper映射文件

    Mapper映射文件 cache – 给定命名空间的缓存配置. cache-ref – 其他命名空间缓存配置的引用. resultMap – 是最复杂也是最强大的元素,用来描述如何从数据库结果集中来加 ...

  7. 关于BMP

    关于BMP位图的资料网上有很多,内容也比较基础.本文实现BMP位图的读取.显示.保存,并对一些重要的问题进行说明(包括字节对齐.内存中的存储顺序.调色板). BMP文件共包括文件头.信息头.调色板(位 ...

  8. 516 Longest Palindromic Subsequence 最长回文子序列

    给定一个字符串s,找到其中最长的回文子序列.可以假设s的最大长度为1000. 详见:https://leetcode.com/problems/longest-palindromic-subseque ...

  9. 138 Copy List with Random Pointer 复制带随机指针的链表

    给出一个链表,每个节点包含一个额外增加的随机指针,该指针可以指向链表中的任何节点或空节点.返回一个深拷贝的链表. 详见:https://leetcode.com/problems/copy-list- ...

  10. AJPFX总结OpenJDK 和 HashMap大量数据处理时，避免垃圾回收延迟的技巧二

    HashMap简史 “Hash Code”这个概念第一次出现是在1953年1月的<Computing literature>中,H. P. Luhn  (1896-1964) 在一篇 IB ...