<!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. 死磕了一题模拟 A掉的时候我是爽的

    ZOJ 3490 没有题解. 一句话,要么贴代码,要么自己打. #include<cstdio> #include<iostream> #include<vector&g ...

  2. python slice 切片

    list,tuple,string,bytes对象可以进行切片处理,生成一个新的这些类的对象. 格式:li[start: stop: step] list切片: >>> li = [ ...

  3. Codeforces Round #516 Div2 （A~D）By cellur925

    比赛传送门 A. Make a triangle! 题目大意:给你三根木棒,选出其中一根木棒增加它的长度,使构成三角形,问增加的长度最小是多少. 思路:签到题,根据样例/三角形性质不难发现,答案就是最 ...

  4. hdu3926 Hand in Hand 同构图

    #include<cstring> #include<cstdio> #include<algorithm> using namespace std; ]; str ...

  5. macOS 将【允许从以下位置下载的应用】设置为：任意来源

    用管理员帐号进入Terminal: 1) 输入:sudo spctl --master-disable ,回车: 2) 重新进入该设置页面即可看到已生效:

  6. JAVA常用设计模式（静态化调用和实例化调用的区别，编辑可见 ）

    用newInstance()与用new是区别的,区别在于创建对象的方式不一样,前者是使用类加载机制,后者是创建一个新类,且newInstance()只能调用无参构造函数. 最大的区别在于内存.静态方法 ...

  7. c#学习系列之装箱拆箱

    1.      装箱和拆箱是一个抽象的概念 2.      装箱是将值类型转换为引用类型 :拆箱是将引用类型转换为值类型       利用装箱和拆箱功能,可通过允许值类型的任何值与Object 类型的 ...

  8. 当css样式表遇到层

    (附:White-space:pre可以是样式表里卖弄body的属性,作用是保持html源代码的空格与换行,等同<pre>标签.) Css样式表可以通过被封在层里的方式来限制页面所修饰的内 ...

  9. .net 音频转换 .amr 转 .mp3 （七牛转换法）

    .amr 用于移动设备的音频,压缩比比较大,多用于人声.通话,效果还行!所以,移动设备多采用amr格式来进行录存!比较常见的例子:通话录音,微信语音以及录音等! 这个鬼,用两个字来形容,就是“蛋疼”: ...

  10. vue安装概要以及vue测试工具

    一.概述 1.安装node,去node官网 2.新建一个项目,通过npm init命令初始化,即创建一个package.json文件 3.用命令 npm install vue -g 全局安装vue( ...