拖动组件

$(function(){
$("#box").draggable({
//revert:true, //拖动后放开返回原来位置
// cursor:Text, //设置拖动鼠标样式
// handle:‘#pox‘, //指定鼠标在某个控件上可以拖动
//disable:true, //不可拖动
// edge:20, //离上下左右边框20px以内的位置可以拖动
// axis:‘h‘, //‘v‘ 竖直拖动 ‘h’平行拖动
//proxy: function (source) {
// var p = $(‘<div style="border:1px solid #ccc;width:400px;height:200px"></div>‘);
// p.html($(source).html()).appendTo(‘body‘);
// return p;          
//}
// onBeforeDrag: function (e) { //alert("拖动前");
// },
// onStopDrag: function (e) { alert("拖动后"); disable: $("#box").draggable({disable:true,})},
});
});

时间: 2024-10-09 18:15:38

拖动组件的相关文章

图片拖动组件

图片拖动组件 DEMO <html> <HEAD> <title>鼠标拖动图片</title> <style type="text/css"> .dragme{position:absolute; cursor:move;width:110px;height:110px;border:#ececec 2px solid;} .imgcss{width:110px;height:110px;} .close{position:a

android之实现SeekBar拖动组件

android之实现SeekBar拖动组件: 布局:layout/activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    androi

第一百九十三节,jQuery EasyUI,Draggable(拖动)组件

Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组件. 一.加载方式 //class 加载方式 <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 &l

JQuery EasyUI---Draggable( 拖动) 组件

学习要点: 1.加载方式2.属性列表3.事件列表4.方法列表 本节重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其他组件. 一. 加载方式 //class 加载方式  这种方式看起来html代码不干净,会污染html.建议使用JS的方式去加载 <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="

jQuery Easy UI Draggable(拖动)组件

上文已经提到过了 jQuery EasyUI插件引用一般我们常用的有两种方式(排除easyload加载方式),所以本篇要总结的Draggable组件同样有两种方式加载: (1).使用class加载方式: <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 </div> (2).JS 加载调

Draggable(拖动)组件

1 一.加载方式 2 //class 加载方式 3 4 <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 </div> 5 6 7 //JS 加载调用 8 9 $('#box').draggable(); 加载方式 属性列表 //属性设置 $('#box').draggable({ re

Draggable(拖动)组件 属性、事件、方法

Draggable(拖动)即实现页面元素的拖动效果. 一.加载方式 1.css样式加载: <div id="box" class="easyui-draggable" style="width:200px;height:150px;background:#F5F6F7;">     内容部分 </div> 使用css样式加载Draggable,方便快捷,但是不利于管理,所以我们有课第二种加载方式,使用Jquery方式加载,

EasyUI3-Draggable(拖动)组件

下面是js的调用,在另一个文件里,index.js中.

EasyUI系列学习(二)-Draggable(拖动)

一.创建拖动组件 0.Draggable组件不依赖于其他组件 1.使用标签创建 <div class="easyui-draggable" id="box" style="width: 200px; height: 100px; left: 100px; background: orange">拖动组件</div> 2.使用js创建 <div id="box" style="width: