本文利用jQuery实现一个拖拽删除桌面小图标的功能，使用起来就像操作系统的回收站一样，我们只需要拖动应用图标至垃圾箱即可删除这个图标，分享给大家，具体实现方法如下 运行效果图：引入核心文件 这里需要引入jquery，jquery ui，与jquery ui css<link rel="stylesheet" href="assets/css/jquery-ui.css" /> <script src="js/jquery/1.8.3/jquery.min.js"></script> <script src="js/jqueryui/1.9.2/jquery-ui.min.js"></script>...
本文实例讲述了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法。分享给大家供大家参考。具体如下： 左右拖拽切换对比图片效果，运行效果后，图片中间有个拖动条，拖动左右滑动，可看到图片不一样的效果，女模特的脸变嫩了，呵呵，其实是用了两张背景图片实现的，这就需要jquery.beforeafter.js插件了，拖动时候的小图标不见了，路径可以在jquery.beforeafter.js中设置，不多说了。 运行效果截图如下：在线演示地...
本文实例讲述了jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法。分享给大家供大家参考。具体如下： 这里介绍jQuery图片左右拖拽特效，无滚动条，将多张图片组合在一起形成的效果，插件使用的是jquery.nicescroll.js，拖动过程中不会出现滚动条，这样更美观了一些，若需要此效果，可参见下边框中的代码。 运行效果截图如下：具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w...
代码很简单，效果非常棒，直接给大家上源码： html <div><div class="money-input">定投金额 :<div class="input-rela"><input type="text" placeholder="2000"/><span>元</span></div></div><div class="money-line"><img index="js-minus-a" class="js-minus" src="../images/minus.png" alt=""/><img id="dragImg" class="red-rela" src="../images/money-dw.png" alt="" onDrag="drag(event)" onDragEnd="dragEnd(event)" styl...
偶然间看到了以前做的一个简洁的div拖拽效果，修改了一下加点注释，经测试完美通过firefox/chrome/ie6-11，现拿来分享一下。 先说一下实现原理及要点，最主要的有三步。第一步是mousedown事件，鼠标mousedown的时候记录此时的鼠标X轴和Y轴以及拖拽框的left和top，并且给拖拽标记赋值true，代表拖拽动作就绪。第二步是mousemove事件，此时动态获取鼠标的X轴和Y轴，然后计算出来拖拽框新的left和top并赋值使其实现拖拽效果。第三步是...
本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法。分享给大家供大家参考。具体如下： 这是使用jquery ui实现的一个精美实用的效果，可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>demo</title> <link rel="sty...
gridster.js 是一个 jQuery 插件用来构建直观的可拖放的布局,支持多列布局,你还可以动态的添加和删除表格中的元素。 1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例，但是按照官方的说明，我在本地测试总是出现这样那样的问题，一是无法移动，二是在磁铁的附近有一个黑点，可能是定位使用的。但是如果在网站中正常使用，应该不会出现这样的黑点。...
本文实例讲述了jQuery控制Div拖拽效果的方法。分享给大家供大家参考。具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #Drigging { width:200px; background:#CCC; bord...
本文实例讲述了jQuery实现拖拽效果插件的方法。分享给大家供大家参考。具体如下： 下面的jQuery插件允许你通过鼠标右键点击拖动overflow的元素，这个插件可以在移动设备上运行 /** * jQuery Drag and Scroll * * Copyright (c) 2012 Ryan Naddy (ryannaddy.com) * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */ (function($){v...
示例参考http://jsfiddle.net/KyleMit/Geupm/2/ （这个站需要FQ才能看到效果） 其实是jqueryUI官方购物车拖拽添加例子的增强版，就是在拖拽的时候增加了排序 这个是html代码代码如下: <div id="products"> <h1 class="ui-widget-header">Products</h1> <div id="catalog"> <h2><a href="#">T-Shirts</a></h2> <div> <ul> <li>Lolcat Shirt</li> <li>Cheezeburger Shirt</li> <li...
本文实例分析了jQuery手机浏览器中拖拽动作的艰难性。分享给大家供大家参考。具体如下： 本想在手机网页中实现一个如iphone可以随意拖动的控制按钮的，但是最后发现竹篮打水一场空， 虽然拖拽动作在手机浏览器中司空见惯，但是在手机浏览器中，要想实现可以被拖拽的组件，却是一件不可能的事情。 先来看看在PC网页中，拖拽动作是怎么做的， 首先，我们有一个按钮，点击有动作，一直按着不放，可以随意拖动，就像iphone可以随意拖动...
今天写了一天这个jquery插件： 可以实现对div进行拖拽来调整大小的功能。代码如下: (function ($) { $.fn.dragDivResize = function () { var deltaX, deltaY, _startX, _startY; var resizeW, resizeH; var size = 20; var minSize = 10; var scroll = getScrollOffsets(); var _this = this; for (var i = 0; i < _this.length; i++) { var target = t...
功能很简单，却非常的实用，代码更加的简洁，这里就不多废话了 奉上源码：代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } .dragBox { width: 400px; height: 200px; position: absolute; top: 40%; left: 40%; background: #e8e8e8; z-index: ...
本demo使用jQuery包，实现表格列宽可拖拽功能，并实现页面reset时的重新布局。使用jQuery，方便函数的调用，给要处理的表格添加id 后，直接调用$("#id").movedTh()即可方便实现，修改了firfox的兼容性。 代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <mce:script type="text/javascript" src="jquery-1.3.2.min.js" mce_src="jquery-1.3.2.min.js"></mce:script> <mce:sty...
在网页上我们经常看到，当点击一个按钮时，弹出一个自定义窗口，并且可以随意的拖拽，从而改变其位置 使用jquery实现拖拽，则必须要jquery的文件了，实现步骤： 1、引入jquery文件 2、编写js脚本 具体代码： html代码： 代码如下:<button id="show">显示</button> <div class="win"> <div class="wTop"><p style="float:right;margin:5px 5px 0px 0px;color:white" id="hidden">X</p></div> <div class="content"></div> </div> ...