这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了 Javascript 基于 jQuery UI 实现选中区域拖拽效果的相关资料, 非常不错,具有参考借鉴价值,需要的朋友可以参考下
一、效果展示
普通的三个 div
鼠标拖动选中效果
选中所有的 div
这样貌似看不出效果,没关系,我们有神奇的 gif 动画,来一个整体的动画效果感受下。
二、代码实现
整个代码其实也不难,需要用到一个博主自己封装的 js 文件。
AreaSelect.js
考虑到代码量有点大,并且知乎没有代码折叠功能,所以这里就留一个文件名。等博主抽时间将它开源到 github 上面去,当然,有需要的朋友也可以直接联系博主,博主免费提供!
引入这个 js 后,还需要引用 jquery 和 jquery UI 相关文件。
- <script src="Scripts/jquery-1.10.2.js">
- </script>
- <script src="Content/jquery-ui-1.11.4.custom/jquery-ui.js">
- </script>
- <link href="Content/jquery-ui-1.11.4.custom/jquery-ui.min.CSS" rel="stylesheet"
- />
- <script src="Scripts/Common/SelectArea.js">
- </script>
因为文件之后,然后剩下的就是 html 和 js 初始化了
- <body>
- <div id="divCenter">
- <div id="div1" style="position:absolute;width:200px;height:150px;left:200px;top:50px;cursor:pointer;">div2</div>
- <div id="div2" style="position:absolute;width:200px;height:150px;left:450px;top:200px;cursor:pointer;">div2</div>
- <div id="div3" style="position:absolute;width:200px;height:150px;left:700px;top:390px;cursor:pointer;">div3</div>
- </div>
- </body>
- $(function () {
- $("#divCenter div").draggable({
- scope: "plant",
- start: function () {
- startMove();
- },
- drag: function (event, ui) {
- MoveSelectDiv(event, ui, $(this).attr("id"));
- },
- });
- oRegionSelect = new RegionSelect({
- region: '#divCenter div',
- selectedClass: 'seled',
- parentId: "divCenter"
- });
- oRegionSelect.select();
- });
以上所述是小编给大家介绍的 Javascript 基于 jQuery UI 实现选中区域拖拽效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0607/330177.html