本例主要目的是使用Jquey的Draggable控件。 使用时首先依次引用Jquery，Jquery-Ui ，Draggable三个Js。然后在js中编写相应的代码，相关代码说明请看程序中的注释。 关于 Draggable的说明请参考：http://docs.jquery.com/UI/API/1.8/Draggable 源码： 代码如下: $(document).ready(function() { //拖拽方法 $("#imgDrag").draggable({ //拖拽范围 containment: "#DragArea", //开始事件 start: function(event, u...
但是如何保存顺序呢，想到了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, ...
而很多页面效果都要用到这些位置。不得已，得练练，得记记。 下面就来说说这个基于 JQuery的简易拖拽插件吧。 按惯例，先说说拖拽的原理，以及搞这么一个东东的步骤： 那什么是拖拽呢？ 看名字就知道了：就是把一个东东拖来拽去的。 放到我们的DOM上，就是改变它的位置。 它只有两个难点：1、如何知道是在拖？ 2、如何知道从哪拖，拖到哪？ 其实，这也算不上难点，毕竟两者都是基础的东西，关键在于熟练。 换到js 中，我们搞一个拖...
本文主要针对拖拽原型进行解析，给刚接触 JQuery 的爱好者一个简单的示例。在引入 Jquery.js 后： 代码如下: $(function(){ //绑定拖动元素对象 bindDrag(document.getElementById('test')); }); function bindDrag(el){ //初始化参数 var els = el.style, //鼠标的 X 和 Y 轴坐标 x = y = 0; //邪恶的食指 $(el).mousedown(function(e){ //按下元素后，计算当前鼠标位置 x = e.clientX - el.offsetLeft; y = e.clientY - el.off...
代码如下： 代码如下: function init() { if(swfobject.hasFlashPlayerVersion("10")){ var flashvars = {}; flashvars.xmlPath = "coffee"; flashvars.name = "coffee"; var params = {}; params.quality = "high"; params.wmode = "transparent"; var attributes = {}; attributes.id = "swf_editer"; swfobject.embedSWF("../img/swf/PhotoEditer2.swf","editarea","670","690","10.3" ,"../img/swf/playerProductInstall.swf"...
直接上代码： 代码如下: 鼠标拖拽复制效果 body{ line-height:150% } .show{ display:block} .hide{ display:none} .clone{position: absolute; border:1px solid #666; background-color:#CCCCCC;} .over{ border:1px solid #666;} #left{ float:left; width:200px; border:1px solid #666;} #left li.selected{ background-color:#CCCCCC} #right{ margin-left:220px; border:1px solid #666;} $(function(){ $("#left ...
步骤： 1.实现随鼠标移动的效果； 2.初始化一个元素及其坐标； 3.拖拽对象的最后坐标，与元素的坐标 进行计算和判断 来确定 要插入的目标元素； 4.用insertBefore 方法 插入到目标元素的前面 具体代码如下： 代码如下: 测试的拖拽功能 body, div { margin: 0; paading: 0; font-size: 12px; } body { width: 960px; margin: 0 auto; } ul, li { margin: 0; padding: 0; list-style: none; } .clear { clear: both; width: 1p...
用$.fn.draggable.defaults重写默认的defaults。 用法 代码如下: title 代码如下: $(#dd).draggable({ handle:#title }); 特性名称类型说明默认值proxystring,function拖拽时要使用的代理元素，设置为clone时，克隆元素将被用作代理。如果指定一个函数，它必须返回一个jQuery对象。nullrevertboolean如果设为true，拖拽结束后元素将返回它的开始位置。falsecursorstring拖拽时的css光标（cursor）。movedeltaXnumber拖拽的元...
这个可与前两个不同了，这个是拖拽到指定的区域内的特效。其实逻辑方式差不多，只不过不同的是 找到目标元素，用appendTo 的方法插入到目标元素。 具体的代码如下，有兴趣者可以试下。（由于是初学，做的简单，如果有其他的方法请给下指点，我定感激不尽哈。。。） 代码如下: 测试的拖拽功能 body, div { margin: 0; paading: 0; font-size: 12px; } ul, li { margin: 0; padding: 0; list-style: none; } .clear { clear: b...
JQuery UI提供的API极大简化了拖拽功能的开发。只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可。 拖拽原理 首先要明确几个概念。 ource：拖拽源，要拖动的元素。 taerget：拖放目标，能够放入source的容器。 拖拽的动作分解如下： 1. drag start：在拖拽源(source)上按下鼠标并开始移动 2. drag move: 移动过程中 3. drag enter: 移动进入目标(target)容器 4. drag lea...
代码如下: 完美拖拽 html, body { overflow:hidden; } body, div, h2, p { margin:0; padding:0; } body { color:#fff; background:#000; font:12px/2 Arial; } p { padding:0 10px; margin-top:10px; } span { color:#ff0; padding-left:5px; } #box { position:absolute; width:300px; height:150px; background:#333; border:2px solid #ccc; top:150px; left:400px; margin:0; } #box h2 { height:25px; cursor:move; bac...
代码如下: 拖拽 *{margin: 0;padding: 0;} #drag{background: #ccc;height: 200px;width: 300px;text-align: center;line-height: 200px;position: absolute;left: 20px;top: 20px;} 我可以拖动哦！！ //jquery方法拖拽 /**$(function(){ var move = false; //判断是否被移动 var a = 0; var b = 0; $("#drag").mousedown(function(event){ move = true; a = event.pageX - parseInt($("#drag").css("left")); b = even...
"元素拖拽改变大小"其实和"元素拖拽"一个原理，只是所动态改变的对象不同而已，主要在于 top、left、width、height 的运用，相对实现起来也非常容易。以下附出源码原型，弄明白了原理再扩展其他实际应用，思路就变得简单、清晰得多了 下面是 JavaScript Code 代码如下: /* * jQuery.Resize by wuxinxi007 * Date: 2011-5-14 */ $(function(){ //绑定需要拖拽改变大小的元素对象 bindResize(document.getElementById('test')); })...
有一段时间没更新博客了，都不知道忙些什么，学习也没什么进展，惭愧。 这一周空闲的时间学着自己写一下JQ插件。以前用原生的JS做过类似拖拽div的效果，现在按原思路改做成一个JQ的小插件，当作制作JQ插件的一个小练习。 html为 代码如下: *{margin:0;padding:0;} #box{width:500px;height:500px;margin:200px auto;position:relative;border:1px solid #ccc;border-left:2px solid #ccc;} .float-box{width:100px;height:1...