先上一个Demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="/javascript/jquery.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.easyui.min.js"></script>
</head>
<body>
<div id="dd" style="width:105px;height:300px;">
<div id="title" style="background:#ECF0F4;">
<label style="height: 100px">拖动</label>
<input type="text" style="width: 100px;"/>
</div>
</div>
<script type="text/javascript">
$('#dd').draggable({
handle:'#title'
});
</script>
</body>
</html>

draggable使用不当

上面这种是不能在文本框输入内容的,

那是在使用drag插件时,使得id为dd的div脱离文档布局,影响了内部div对文本框的控制,根据代码,实际参与拖拽的div是title的div,如果title太大就影响了文本框

整体样式需要修改dd的css

修改如下(title的div高度和label的div高度相同,那么只能拖动label来控制位置,也就不影响下面的文本框)

<div id="dd" style="background:#ECF0F4;width:105px;height:300px;">
<div id="title" style="height: 20px;">
<label style="height: 20px">拖动</label>
<input type="text" style="width: 100px;"/>
</div>
</div>

修改后

<div id="dd" style="background:#ECF0F4;width:105px;height:300px;">
<div id="title" style="height: 200px;">拖动
</div>
<input type="text" style="width: 100px;"/>
</div>

再次修改

设置echarts数据为空时就显示空白,不要动画和文字:

options.series=[]就可以了,如果是options.series[0].data=[];就会有动画

easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字的更多相关文章

  1. div模拟文本框textarea

    需求:利用highlight.js对文本框中的内容进行高亮显示 1.highlight.js使用 js中:<script src="js/highlight/highlight.pac ...

  2. EasyUI实现图片的上传后与其他文本框的提交以及DataGrid中图片的展示

    图片即文件,在jsp中文件上传很简单,一个type为file的input,一个form指定enctype为multipart/form-data,通过post提交到后台利用apache的commons ...

  3. 隐藏div,文本框角圆滑,消除外边框

    #div_1 /*将div设置完成,并且隐藏,当需要的时候对其属性值进行修改*/ { height: 36px; width: 1099px; background-color: #F0DFDF; m ...

  4. 用这个插件jquery.raty.js————用于星星评价(这个案例用于后台传数据给我,前台显示星星个数)

    1.引入jquery.js文件 2.引入jquery.raty.js 3.页面中放在这个:<span class="readOnly" data-path="ima ...

  5. 可编辑的div模仿文本框缓存(使用AUTOCOMPLETE属性,off是不缓存,on是缓存(默认))

    用session实现的, 1.进当前页面就从session(a)中取( sessionStorage.getItem )(不管存在不存在,后续有合理的存储和删除); 2.离开当前页时删除这个sessi ...

  6. 监听文本框输入开发仿新浪微博限制输入字数的textarea插件

    监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...

  7. jquery easyui datebox单击文本框显示日期选择

    jquery easyui的datebox日历控件,实现单击文本框出现日历选择,如下图: 代码: 修改jquery.easyui.min.js第9797行函数(jQuery EasyUI 1.3.2) ...

  8. easyui 给文本框 checkbox赋值问题

    刚进公司 要做一个后台维护系统,选择easyui 从未接触过 对于页面给文本框赋值遇到一些问题 写下了来 我之前使用了好几种方式都未能成功给input 文本框赋值 第一尝试传统的JavaScript代 ...

  9. 写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js

    做了个限制文本框最大输入长度的jquery插件,效果图(共2个文本框,限制最多10个字符): 功能:当超出设置的最大字符长度后,会截断字符串.更改当前元素的css(会在1秒后还原css).支持长度超出 ...

随机推荐

  1. make the innerText in the html element can not be selected

    approach style="-moz-user-select:none;" onselectstart="javascript:return false;" ...

  2. Android应用崩溃后异常捕获并重启并写入日志

    在Android开发时,有时会因为一些异常导致应用报错,偶尔会因为错误 而崩溃,导致用户体验下降,为了解决这问题,我们就要对这样的异常处理: 代码如下: CrashHandler.java impor ...

  3. python复习

    1.input和raw_input的区别 input假设输入的都是合法的python表达式,如输入字符串时候,要加上引号,而raw_input都会将所有的输入作为原始数据 2.原始字符串前面加上r,e ...

  4. 系统间通信(9)——通信管理与RMI 下篇

    接上文<架构设计:系统间通信(8)--通信管理与RMI 上篇>.之前说过,JDK中的RMI框架在JDK1.1.JDK1.2.JDK1.5.JDK1.6+几个版本中做了较大的调整.以下我们讨 ...

  5. SPDY 是什么?如何部署 SPDY?

    摘要:当老迈的 HTTP 协议逐渐不能满足人们需求的时候,Google 的 SPDY 协议出现在面前,那么这个长期以来一直被认为是 HTTP 2.0 唯一可行选择的 SPDY 是什么呢?当下我们如何能 ...

  6. UIScrollView实现图片轮播器及其无限循环效果

    图片轮播器: 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...

  7. bzoj2200: [Usaco2011 Jan]道路和航线

    先忽略航线,求出图中所有连通块,再用航线拓扑排序求出每个连通块的优先级 然后dijkstra时优先处理优先级高的块里的点就行了 ps:这题SPFA会TLE #include <iostream& ...

  8. 76.Android之EventBus源码解析

    转载:http://p.codekk.com/blogs/detail/54cfab086c4761e5001b2538 1. 功能介绍 1.1 EventBus EventBus 是一个 Andro ...

  9. BZOJ1010 [HNOI2008]玩具装箱toy

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  10. DataTable是否存在某个列的判断

    使用 DataTable.Columns.Contains方法可以判断某个列名是否存在于某个DataTable中 //添加模拟数据 DataTable t = new DataTable(); Dat ...