<!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. vim的visual可视模式（转载）

    转自:http://www.cnblogs.com/chenyadong/archive/2011/08/30/2159809.html 为了便于选取文本,VIM 引入了可视(Visual)模式.要选 ...

  2. typeof操作符返回一个字符串，表示未经计算的操作数的类型。

    typeof操作符返回一个字符串,表示未经计算的操作数的类型.   语法 typeof运算符后跟操作数: typeof operand or typeof (operand) 参数 operand 是 ...

  3. 在 DotNetty 中实现同步请求

    一.背景 DotNetty 本身是一个优秀的网络通讯框架,不过它是基于异步事件驱动来处理另一端的响应,需要在单独的 Handler 去处理相应的返回结果.而在我们的实际使用当中,尤其是 客户端程序 基 ...

  4. SCUT - 290 - PARCO的因数游戏 - 博弈论

    https://scut.online/p/290 一个 N 个数的取数游戏,Kaildls 和 Parco 轮流操作,每次操作从 N 个数中取一个数 y 并把他变成 y-x(满足 x | y 且x  ...

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

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

  6. poj2385【基础DP】

    挑战DP 题意: 有两棵树,给每分钟有苹果掉落的苹果树,一开始B在 1 树下,B最多只能移动W步,求一个最大数量拿到的. 思路: 一开始想的是,我对于每分钟情况来说无非是等于之前的在本位置+1,或者等 ...

  7. hdu2767(图的强连通)

    //题意:问需要添加几条边使得这张图成为每个点都等价(强连通图) 我们先把图中的强连通分量缩点 可能他本身就是满足条件,那么直接输出0 经过缩点后,就可以把强连通分量看成一个个独立的点,在这张图上搞一 ...

  8. python 迭代器 Iterator

    一.可迭代对象定义 可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.tuple.dict.set.str.bytes.bytearray等: 一类是generator, ...

  9. 纯JS阻止浏览器默认滚动事件，实现自定义滚动方法

    首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...

  10. 求导四则运算以及三角函数求导 Derivative formulas

    对特定函数的求导. 1:sin(x) 对其进行求斜率.带入公式得:[ sin(x+Δx)- sin(x)]/Δx  = [ sinx*cosΔx + cosx*sinΔx -sin x ]/ Δx = ...