jquery-ui.min.js的draggable()拖拽功能

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src=‘http://libs.baidu.com/jquery/1.7.2/jquery.min.js‘></script>
<script src="http://libs.baidu.com/jqueryui/1.9.0/jquery-ui.min.js "></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; border:#AAA 1px solid; background-color:#EEE; }
</style>
</head>
<body>
<div id="draggable">求拖走</div>
<script>
$(function() {
    $( "#draggable" ).draggable({draggable:false});
});
</script>
</body>
</html>

时间: 2024-10-12 20:07:11

jquery-ui.min.js的draggable()拖拽功能的相关文章

利用jQuery UI为CMS网站实现拖拽布局效果,秒杀table布局

1 实现效果 对于使用过CMS系统制作网站的人应该都清楚,制作网站过程有一个重要的步骤就是制作页面布局.目前,实现页面布局有两种方式:table与div.这两种方式各有其优劣之处. Table: 优势:使用简单,使用表格进行布局顺理成章,概念和效果图理解起来很简单,制作也方便. 劣势:表格布局比较固定,布局效果控制的比较死,一些较为特殊的效果.层叠效果等比较难以实现. Div: 优势:布局效果灵活,div能轻易的控制布局位置,浮动效果等. 劣势:操作较为复杂,需要前端布局设计人员对div的特性.

vuejs2.0使用Sortable.js实现的拖拽功能( 转)

文章目录 简介 实现效果 html主要代码 css代码 js代码 简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码. 该案例主要是在用于vuejs2.0中实现的拖拽功能,用到的的js有Sortable.js,vuedraggable.js,当然还有vue.min.js,提供的案例

JQuery UI的拖拽功能

JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量的第三方插件可以丰富JQuery UI的功能. JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念. ource:拖拽源,要拖动的元素. taerge

jquery.nicescroll.min.js滚动条插件的用法

1.jquery.nicescroll.min.js源码 /* jquery.nicescroll 3.6.8 InuYaksa*2015 MIT http://nicescroll.areaaperta.com */(function(f){"function"===typeof define&&define.amd?define(["jquery"],f):"object"===typeof exports?module.ex

js实现鼠标拖拽多选功能

最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo:遮罩出现:被遮罩盖住的,即为选中的块(背景色为粉色)下面是具体代码,注释已在文中,与大家交流. <!DOCTYPE html> <html> <head> <title>鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">

多语言切换jquery.i18n.min.js

项目需求,切换多语言,采用 jQuery.i18n.min.js文件内容如下 ------------------------------------------------- /*! * jquery i18n Plugin v1.0.0 * https://github.com/ZOMAKE/jquery.i18n * * Copyright 2017 ZOMAKE,Inc. * Released under the Apache Licence 2.0 */ (function($) { 

jquery.form.min.js插件的使用实例

因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息. 尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件,查找资料后得知: .serialize()序列化表单,提交按钮的值不会被序列化.另外,如果想要一个表单元素的值被序列化成字符串,这个元素必须含有 name 属性.此外,复选框(checkbox)和单选按钮(radio)(input类型为 "radio" 或 "checkbox&q

js实现登陆页面的拖拽功能

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登陆页面的拖拽功能实现</title> </head> <style type="text/css"> *{ margin:0; padding:0; } a{ text-decoration: none; } .dialog{ width: 380px;

为网页生成二维码(jquery.qrcode.min.js)

做网站活动页面的时候,要为每个活动生成一个二维码,虽然简单,但还是习惯记录下来. jquery.qrcode.min.js是js的一个库,主流的浏览器都支持:IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile方法: qrcode(),参数: text:要编码的字符串地址 width:定义的宽度 height:定义的高度 background:背景色 foreground:前景色 <!doct