让元素在网页中可拖动示例代码

1.导入相应的JS类库:


代码如下:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

2.带有id的div元素:


代码如下:

<div id="draggable">
<p>Drag me around!</p>
</div>

3:设置div的样式:


代码如下:

#draggable {
width:150px;
height:150px;
padding:0.5em;
border:1px solid;
}

4:让元素可拖动：


代码如下:

<script>
$(function() {
$('#draggable').draggable();
});
</script>

效果请点击：http://jsfiddle.net/tounaobun/KS8JC/
源代码：


代码如下:

<!-- import the necessary files -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$('#draggable').draggable();
});
</script>
<style>
#draggable {
width:150px;
height:150px;
padding:0.5em;
border:1px solid;
}
</style>
<div id="draggable">
<p>Drag me around!</p>
</div>

赞 (0)

相关推荐

  • 让元素在网页中可拖动示例代码

    1.导入相应的JS类库: 复制代码 代码如下: <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 2.带有id的div元素: 复制代码 代码如下: <div id="draggable&qu

  • JavaScript实现网页视频添加水印的示例代码

    JavaScript实现网页视频添加水印的示例代码

    目录 示例图 原理 代码示例 示例图 原理 通过html的页面布局,在video播放器层面,通过js控制dom,插入文本水印代码. 代码示例 index.html <!DOCTYPE html> <html> <head> <meta name="renderer" content="webkit" /> <meta http-equiv="Content-Type" content=&quo

  • highcharts 在angular中的使用示例代码

    highcharts 在angular中的使用示例代码

    本文介绍了highcharts 在angular中的使用示例代码,分享给大家.具体如下: 网址 https://www.hcharts.cn/demo/highcharts https://github.com/pablojim/highcharts-ng 安装依赖 npm install highcharts-ng --save 引入依赖 'highcharts/highcharts.src.js', 'highcharts-ng/dist/highcharts-ng.min.js' 注入依赖

  • JS中跳出循环的示例代码

    1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环. 2.而在jquery中 $.each使用return true 终止本次循环计入下一个循环,return false终止整个循环.  函数返回值跟此处无关 例: $.extend($.fn.datagrid.methods, { isChecked: function (dg, param) { var flag = false;//是否选中 var allRows = $(dg).datagri

  • 封装一下vue中的axios示例代码详解

    在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御cSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库.如果还对axios不了解的,可以移步axios文档. 安装 npm install axios; // 安装axios 好了,下面开始今天的正文. 此次封装用以解决: (

  • python golang中grpc 使用示例代码详解

    python 1.使用前准备,安装这三个库 pip install grpcio pip install protobuf pip install grpcio_tools 2.建立一个proto文件hello.proto // [python quickstart](https://grpc.io/docs/quickstart/python.html#run-a-grpc-application) // python -m grpc_tools.protoc --python_out=. -

  • Django与AJAX实现网页动态数据显示的示例代码

    前言 这部分已经折腾我两天了,还是没有头绪,可能还会折腾更久,最后在第三天上午解决问题,在一个不起眼的地方被坑了,jQuery加载的问题.会者不难,难者不会,希望后面人少走弯路吧 环境 windows10 pycharm2017.3.3 professional edition python3.6.4 django2.0.2 方法 创建后台读取数据函数,用于后台从数据库读取数据.在views.py文件内增加以下代码 from django.http import JsonResponse def

  • C#获取微信小程序的云数据库中数据的示例代码

    目录 0 背景说明 0.1 获取AccessToken 0.2 数据库查询 0.3 文件下载 2. 简单的封装 3. 简单测试 4. 参考文档 0 背景说明 试水小程序,实现访客登记,现有.NET程序需要获取该小程序的数据 0.1 获取AccessToken 调用绝大多数后台接口时都需使用 access_token 参考小程序文档:auth.getAccessToken 发送Get请求,获取AccessToken 接口: https://api.weixin.qq.com/cgi-bin/tok

  • Python实现识别图像中人物的示例代码

    Python实现识别图像中人物的示例代码

    目录 前言 环境部署 代码 总结 前言 接着上一篇:AI识别照片是谁,人脸识别face_recognition开源项目安装使用 根据项目提供的demo代码,调整了一下功能,自己写了一个识别人脸的工具代码. 环境部署 按照上一篇的安装部署就可以了. 代码 不废话,直接上代码. #!/user/bin/env python # coding=utf-8 """ @project : face_recognition @author : 剑客阿良_ALiang @file : te

  • 网上比较常用的嵌入网页中的播放器代码收藏

    例如:网络上最流行的windows media流(asf,wma,wmv格式...),Real流(rm,rmvb...),还有MPEG系列编码格式(MP4/MP3格式...) Windows Media Video 是微软推出的一种流媒体格式,它是在"同门"的ASF(Advanced Stream Format)格式升级延伸来得.在同等视频质量下,WMV格式的体积非常小,因此很适合在网上播放和传输.Windows Media Player9兼容所有格式的WMV,官方编码器是Window

随机推荐