EasyUI ---- draggable可拖动的用法
<link href="~/Scripts/easyui1.5/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Scripts/easyui1.5/themes/icon.css" rel="stylesheet" />
<script src="~/Scripts/easyui1.5/jquery.min.js"></script>
<script src="~/Scripts/easyui1.5/jquery.easyui.min.js"></script>
<script src="~/Scripts/easyui1.5/locale/easyui-lang-zh_CN.js"></script> //第一种加 class="easyui-draggable"
<div class="easyui-draggable" style="width:200px; height:200px; border:1px solid #808080;"></div> //第二种 js
<div id="draggable" style="width:200px; height:200px; border:1px solid #808080;"></div> <script>
$(function () {
$("#draggable").draggable();
}); </script>
//拖拽的限制
<div style="border:1px solid #ff0000; width:500px; height:500px; left:100px; top:100px;">
<div class="easyui-draggable" style="width:200px; height:200px; border:1px solid #808080;"></div>
<div id="draggable" data-options="onDrag:onDrag" style="width:200px; height:200px; border:1px solid #808080;"></div> </div>
<script>
$(function () { $("#draggable").draggable({ });
}); function onDrag(e) { var d = e.data;
//不能脱出父容器的左边框
if (d.left < ) { d.left = }
//不能脱出父容器的上边框
if (d.top < ) { d.top = } //d.target 内层div的宽度,d.parent是外层div宽度 不能脱出父容器的右边框
if (d.left + $(d.target).outerWidth() > $(d.parent).width()) {
d.left = $(d.parent).width() - $(d.target).outerWidth();
}
//不能脱出父容器的下边框
if (d.top + $(d.target).outerHeight() > $(d.parent).height()) {
d.top = $(d.parent).height() - $(d.target).outerHeight();
}
} //也可用js调用
$(function () {
$("#draggable").draggable({
onDrag:onDrag
});
}); </script>
EasyUI ---- draggable可拖动的用法的更多相关文章
- EasyUI Draggable 可拖动
通过 $.fn.draggable.defaults 重写默认的 defaults. 用法 通过标记创建可拖动(draggable)元素. <div id="dd" clas ...
- easyUI draggable组件使用
easyUI draggable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字
先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...
- JQuery easyui (1) Draggable(拖动)组件
很不习惯这种强迫式的学习,但谁叫我不是老师了,所以还是决定坚持练习,顺带为博客加点东西.虽然我还是很反感短时间内惯性的去熟悉一个工具. easyui做为一个封装了JQusey的UI插件,其实还是蛮好用 ...
- EasyUI - Draggable 拖动控件
效果: html代码: <div id="box" style="width: 400px; height: 200px; background-color: #f ...
- EasyUI系列学习(三)-Draggable(拖动)
一.创建拖动组件 0.Draggable组件不依赖于其他组件 1.使用标签创建 <div class="easyui-draggable" id="box" ...
- EasyUI Tree节点拖动到指定容器
效果图:将tree节点拖动到指定的DIV中,结果显示节点的id和text 代码: <!DOCTYPE html> <html> <head> <meta ch ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统-WebApi的用法与调试
1:ASP.NET MVC5+EF6+EasyUI 后台管理系统(1)-WebApi与Unity注入 使用Unity是为了使用我们后台的BLL和DAL层 2:ASP.NET MVC5+EF6+Easy ...
- easyui组件window拖动时超过浏览器顶部则无法拖回
项目研发过程中遇到一个问题,easyui的window可以随意拖动或者放大缩小,但是鼠标只有放在“header”上面时鼠标箭头才会变成四个方向的箭头,也就是只有在这时才能拖动窗口:但是当拖动的窗口超过 ...
随机推荐
- 上传指定url文件到阿里云oss
好处是不用下载到本地,也不用删除本地文件.省事! 先下载阿里云官方代码 https://github.com/aliyun/aliyun-oss-csharp-sdk 引用其中的 aliyun-os ...
- [LeetCode] 821. Shortest Distance to a Character_Easy tag: BFS
Given a string S and a character C, return an array of integers representing the shortest distance f ...
- [LeetCode] 203. Remove Linked List Elements_Easy tag: Linked LIst
Remove all elements from a linked list of integers that have value val. Example: Input: 1->2-> ...
- 网络编程—代码—TCP网络传输
一.TCP:用字符流传输信息 ------------------------------------------------------------------------------ [用字符流的 ...
- select,radio,checkbox兼容性
- VMware前路难测,多个厂家群雄逐鹿
以VMware为例,虚拟机巨头公布了第二财季报告所示,它第二财季收入同比增长13%,达到了21.7亿美元,而且该公司收入和每股收益均超出预期. 在人们高谈Salesforce.亚马逊等新兴云计算厂商取 ...
- 安装Hue后的一些功能的问题解决干货总结(博主推荐)
不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...
- SNMP学习笔记之SNMP报文协议详解
0x00 简介 简单网络管理协议(SNMP)是TCP/IP协议簇的一个应用层协议.在1988年被制定,并被Internet体系结构委员会(IAB)采纳作为一个短期的网络管理解决方案:由于SNMP的简单 ...
- cnats 使用
1. 准备 yum install cmakeyum install gcc gcc-c++yum install ncurses ncurses-develyum install openssl o ...
- c++随机数及rand()的缺陷
c++生成随机整数和浮点数如下: #include <random> using namespace std; int _tmain(int argc, _TCHAR* argv[]) { ...