本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法。分享给大家供大家参考，具体如下： 该插件是文章作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。 此插件旨在实现目前较为流行的拖拽改变元素大小的效果，您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高。整体代码如下：无标题文档*{margin:0;padding:0;} .box{position:absolute;lef...
本文是分享了javascript实现移动端上的触屏拖拽功能，具体内容如下 效果图：实现代码：body {height: 2000px;}#block {width:200px;height:200px;background-color: red;position: absolute;left: 0;top: 0;}touchstart,touchmove,touchend,touchcancel // 获取节点var block = document.getElementById("block");var oW,oH;// 绑定touchstart事件block.addEventListener("touchstart", function(e) {console.log(e);var touches =...
几年前，我参与设计开发一个房产网的项目，我负责前端工作，由于项目经理要求比较高，参考了很多房产类网站比较优秀的功能，想把别人比较优秀的设计和想法集合到一起，那时的设计稿和功能实现，简直就是改了又改，今天做好的一个很好的效果，可能第二天就要推到重来，算了，不说这些了，还是说说我们今天要讲解的案例吧，不知道大家访问过搜房网没有（完全没有做广告之嫌，搜房网，可以给点广告费不），其中有一个功能产品经理特别...
之前文章中也讲了一下拖拽的基本思想，理论是有了，那实践呢，可以运用到什么地方呢？下面就给大家带来一个用拖拽思想写的一个小实例，供大家参考，大致效果看下图：就是这样一个简单的一个拖拽条，你可以把它理解为滚动条，也可以理解为表单中的数量选择控件，也可以理解为进度条，等等，反正你可以改成很多你想要的效果，废话不多说，我们来看看这个是怎么做的吧！ 想了想，感觉原理就不用说了吧，我在拖拽效果中就已经说的很清楚...
经常在网站别人的网站的注册页中看到一个拖拽验证的效果，就是它的验证码刚开始不出来，而是有一个拖拽的条，你必须将这个拖拽条拖到底，验证码才出来，说了感觉跟没说一样，你还是不理解，好吧，我给个图你看看：这个是在万网的注册页中所截的图，大概的效果就是，当拖动那个拖拽框时，如果拖拽框没有拖到最右边，则拖拽框会移动到初始位置，如果拖动到最右边，则拖拽框显示为对勾，中间的文字也变了，但是我试了一下，他的验证码...
一、起因&思路 一直想写一个原生js拖拽效果，又加上近来学react学得比较嗨。所以就用react来实现这个拖拽效果。 首先，其实拖拽效果的思路是很简单的。主要就是三个步骤： 1.onmousedown的时候，启动可拖拽事件，记录被拖拽元素的原始坐标参数。 2.onmousemove的时候，实时记录鼠标移动的距离，结合被拖拽元素第一阶段的坐标参数，计算并设置新的坐标值。 3.onmouseup的时候，关闭可拖拽事件，记录新的坐标值。 注意：这里主要是通...
本文总结一下，拖拽所延伸出来的一些效果，供大家参考，具体内容如下 1.实现拖拉图片时，带框的效果。即当鼠标拖动某一个图片或物体时，其原有位置扔保留其型。 这种效果，其实很简单，主要是另外创建一个物体，使其与被拖拽的物体，宽和高一样，然后，将其变为拖拽的对象。 直接上代码：<html#div1 {width:100px; height:100px; background:yellow; position:absolute;} .box{border: 1px solid black;position: absolute;}无标题...
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 前几天写的那个拖拽，自己留下的疑问。。。这次在热心博友的提示下又修...
下面是自己写的一个关于js的拖拽的原型声明：代码如下 需要注意的问题包括: 1.this的指向到底是指向谁--弄清楚所指的对象 2.call()方法的使用 3.直接将父级原型赋给子级与使用for将其赋给子级有什么区别？ 比如：for(var i in Drag.prototype) {LimitDrag.prototype[i]=Drag.prototype[i];----------子级发生改变，其父级并不会受到影响 }LimitDrag.prototype=Drag.prototype；---------直接将原型赋给子级，会导致当子级发生改变时...
这是个功能非常简单的类，只实现了拖拽的功能，当然，代码也因此保持了原始的简洁，下面是这个类库的代码： 代码 代码如下: /************************************************** * Drag.js * 作者：橡树小屋 07.17.2010 * http://www.cnblogs.com/babyzone2004/ *用法：Drag.initDrag(id); id是标签的id名称 **************************************************/ var Drag={ dragObject:null, mouseOffset:null, initDrag:func...
其实对于弹出层而言，拖拽最初的目的很单纯，就是为了通过拉开层，使被弹出层挡住的内容可见，（当然，后来关于拖拽的功能不断被优化，使得拖拽的应用有了别的意义，最典型的如igoogle的自定义首页，通过拖放的形式满足用户自定义想要的内容模块顺序和位置）。 本文讨论的重点不是iGoogle的拖放效果，那属于进阶篇，本文是拖拽的“第一阶”，如题，实现最简单的拖拽。 这里的“最简单”即不考虑多个拖拽层的堆叠顺序，不考虑拖拽范...
但是如何保存顺序呢，想到了cookie，但是用如何用cookie保存顺序呢，直接保存html代码下次读取覆盖可以，但是总感觉内容多的话 保存的东西比较多，后用ui插件获取id保存id在读取实现了顺序的保存，废话不多说..直接看代码... 代码如下: div { border: 1px solid red; } #myList { padding-top: 20px; width: 500px; background: #EEE; list-style-type: none; } #myList li { height: 30px; cursor: pointer; margin: 20px; b...
代码如下: /* * jqDnR - Minimalistic DragnResize for jQuery. * * Copyright (c) 2007 Brice Burgess <bhb@iceburg.net>, http://www.iceburg.net/ * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php * * $Version: 2007.08.19 +r2 * last modified by leegle 2011.02.11 * fix bug:溢出之后不能回来的,添加在范围内移动 */ (function($) { $.fn.jqDrag = function(h) { return i(this, ...
当然我们可以研究js库的源码, 也可以自己去发明轮子试试看, 其过程还是挺有趣的...下面我就来实现下页面元素的拖拽功能 现在就开始着手实现, 让我们从最顶层的方法讲起, 它用于初始化一个drag object, 方法的声明如下 function DragObject(cfg) 这里的cfg我们用一个对象来传入, 有点像Extjs里配置属性 代码如下: var dragObj = new DragObject({ el: exampleB, attachEl: exampleBHandle, lowerBound: new Position(0, 0), //posi...
而很多页面效果都要用到这些位置。不得已，得练练，得记记。 下面就来说说这个基于 JQuery的简易拖拽插件吧。 按惯例，先说说拖拽的原理，以及搞这么一个东东的步骤： 那什么是拖拽呢？ 看名字就知道了：就是把一个东东拖来拽去的。 放到我们的DOM上，就是改变它的位置。 它只有两个难点：1、如何知道是在拖？ 2、如何知道从哪拖，拖到哪？ 其实，这也算不上难点，毕竟两者都是基础的东西，关键在于熟练。 换到js 中，我们搞一个拖...