在目前接触到的树插件中，我觉得zTree比较简单，也容易上手。有一次业务需求是将某对象分组树上的对象可以随意拖拽，相当于改变了对象的分组，因此我用到了zTree，对其进行了一些列学习。 首先下载zTree所需的相关包，附上官方下载连接：zTree下载，引入相关文件后就可以进行zTree的构建了。首先在页面上加ul标签，然后为树加上id，calss为ztree，前端页面就完成了。 注意：下面所有的代码是根据我自己的需求写的，且不完整，主要参...
jqueryUI sortable 可以用来进行页面拖拽布局，然而有一个小问题就是拖拽后如何保存状态。 工作中遇到了这个情况，遍把这个问题记了下来，具体思路是： 利用拖拽stop后利用 var arr = $( ".sortable" ).sortable(toArray);记录拖拽后的id数组顺序，然后把这个数组存起来，可以存cookie,数据库，localstorage等，刷新页面后读取这个数组，然后进行重新排序。具体的代码如下可直接复制运行。本文将数组保存在localstorage里面。 <!d...
增强动态增加Div效果原来没有新建动作，分析代码后发现很容易增强~~ <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试的拖拽功能</title> <style type="text/css"> body, div { margin: 0; paading: 0; font-size: 12px; } body { width:100%; margin: 0 auto; } ul, li { margin: 0; padding: 0; list-style: none; } .clear { clear: both; width: 1px; heigh...
在没给大家分享实现代码之前，先给大家展示下效果图：具体实现代码如下所示： index.html <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>iNettuts - Welcome!</title><link href="inettuts.css" rel="stylesheet" type="text/css" /> </head> <body><div id="head"><h1>iNettuts</h1></div><div id="columns"><ul id="column1" class="column"><li class="widget co...
这是一个使用了CSS3立体效果的强大特效，本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时，环形图片墙可以跟随鼠标进行3D旋转动画。 进去后可以上下左右的拖动图片。 本示例中使用到了CSS3的transform-style 属性，该规定如何在 3D 空间中呈现被嵌套的元素。 默认值： flat 继承性： no 版本： CSS3 JavaScript 语法： object.style.transformStyle="preserve-3d" 有2个属性值可选择： flat 子元素将不保留其 3D 位置...
jQuery拖拽通过八个点改变div大小 js:(function($) { /** * 默认参数 */ var defaultOpts = { stage: document, //舞台 item: resize-item, //可缩放的类名 }; /** * 定义类 */ var ZResize = function(options) { this.options = $.extend({}, defaultOpts, options); this.init(); } ZResize.prototype = { init: function() { this.initResizeBox(); }, /** * 初始化拖拽item */ initResizeBox: function() { var self = this; ...
一、效果展示 普通的三个div鼠标拖动选中效果选中所有的div这样貌似看不出效果，没关系，我们有神奇的gif动画，来一个整体的动画效果感受下。二、代码实现 整个代码其实也不难，需要用到一个博主自己封装的js文件。 AreaSelect.js考虑到代码量有点大，并且知乎没有代码折叠功能，所以这里就留一个文件名。等博主抽时间将它开源到github上面去，当然，有需要的朋友也可以直接联系博主，博主免费提供！ 引入这个js后，还需要引用jque...
项目需要，实现一个拖放操作，要求每次可以拖拽选中的多个元素，释放到目标容器后可排序。考虑了一下，觉得jquery-ui比较合适，毕竟它提供了项目需要的交互性事件机制。拖拽、释放、排序、选择等效果。而在实际的操作中，遇到个很多的问题，说明一下，最后附上效果图和代码。 1.本人使用的bootstrap框架，引入jquery-ui后，为元素添加拖拽方法后，提示该方法不是一个函数。查找原因，是bootstrap和jquery-uide的$ 标识符控制权冲突...
通过jquery可以很容易实现CP端的拖拽。但是在移动端却不好用了。于是我自己写了一个在移动端的拖拽demo，主要用到的事件是触摸事件（touchstart，touchmove和touchend）。 这个demo实现的功能是：可以拖拽的元素（在这里是图片）位于列表中，这些元素可以被拖到指定区域，到达指定区域（控制台）后，元素被插入控制台后，原来的拖动元素返回原位置，新的元素依然可以在控制台中拖动，也能拖出控制台。 在这个demo中一个用三个模块，...
现在很多后台列表为了方便均使用拖拽排序的功能，对列表进行随意的排序。 话不多说 ，我在网上找了一些demo，经过对比，现在把方便实用的一个demo列出来，基于jqueryUI.js 先上html代码，很简单：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jqueryUI拖动</title> </head> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/jquery-ui.min.js"></script> <style>tr{cursor: pointer;} <...
在我使用tree拖拽时总是失败，控制台输出了很多错误。 经过跟踪分析发现这是一个由于特殊配置导致的错误。 原先错误的代码如下： $(#tree).tree({ //省略其他 loadFilter: function(data, parent){ return data.rows; } });由于我后台返回值并不是一个直接适合tree使用的数据，需要从中取出rows才可以，所以就有了这段代码。 而 EasyUI 出错的原因就在于当拖动时，拖动方法中仍然会调用loadFilter方法，如下图代码：EasyUI在前面的...
本文实例讲述了jQuery实现可拖拽的许愿墙效果。分享给大家供大家参考，具体如下： 运行效果图如下：这里简单介绍下功能点： ① 随机显示背景图或背景色 ② 出现的位置随机 ③ 可以通过拖拽改变位置 好了，附上代码： <!doctype html> <html lang="en"> <head><meta charset="UTF-8"/><title>许愿墙</title><link rel="stylesheet" href="base.min.css"/><style>#wish{height:650px;margin:20px;position:relative;width:960px;}.wi...
本文实例讲述了jQuery实现的简单拖拽功能。分享给大家供大家参考，具体如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> *{padding: 0;margin: 0; } div{width: 100px;height: 100px;background: #f00;cursor: pointer;position: absolute;left: 0;top: 0; } </style> </head> <body> <div></div> <script src="jquery.js"></script> <script> $(function(){//移动窗口的步骤/...
很久之前练习过的一个实践，复习完渐变、圆角、3D变形、拖拽等等来看源码，估计还不会太凌乱(◎﹏◎)哈哈哈 效果图： HTML: <!doctype html> <html onselectstart="return false;" lang="en"><!-- !important --> <head><meta charset="UTF-8"><title>3D拖拽相册</title><link rel="stylesheet" href="css/style.css"> </head> <body><!-- html上阻止默认行为onselectstart --><div class="pic"><img src="images/1.jpg" /><img sr...
实例如下： <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>div横向拖拽排序</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/css"> body,div{ padding: 0px; margin: 0px; }.box { margin-left: 15px; padding : 10px; padding-right: 0px; width : 810px; height : 150px; border : blue solid 1px; }.horizontal-div{ float : left; margin-right: 10px; bord...