本文主要针对拖拽原型进行解析，给刚接触 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...
腾讯微博也已近实现了拖拽上传。其实很简单。 由于没有服务器支持在文章里不能做上传演示，下载实例 拖拽上传需要什么支持 1:需要浏览器支持 drop 事件。(响应拖拽事件获取file对象); 2:XMLHttpRequest 对象有 sendAsBinary 方法(用于发送数据); 以上两个条件 目前仅有 firefox 能达到。 chrome 第一项达标，第2项可以使用 google.gears 来模拟。 所以能实现拖拽上传的浏览器 有 firefox3.6 + 和 chrome7+。 如何实现拖拽上传 1:绑...
如今现代的浏览器已经有很多支持拖拽文件读取操作，其优点不再复述。前端时间利用拖拽改进了一下网站的头像上传流程，对其中的要点和实践体会做一点总结。先看一下总体视图：1、 文件拖拽接受区域要有明显的标示，并且要尽可能的大（由于版面的原因，这个界面的拖放盒子并不大）。可以用虚线框盒子等样式吸引用户拖拽文件。最好有明显的文字提示和图标配合。 2、 在交互体验上当文件拖入浏览器窗口时，可以用拖放区变换背景颜色等向...
弹出层并可拖拽 html,body{height:100%;overflow:hidden;} body,div,h2{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} center{padding-top:10px;} button{cursor:pointer;} #overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;} #win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid...
代码如下: /* *使用方法： * var d = new Drag({id:dragPannel,maxLeft:500,maxTop:200}); * d.ready(); *请注意： * 拖动对象的left和top样式必须写在其style属性里边 * */ //矫正调用者。将 fn 作为 newObj 的方法调用 function repairCaller(newObj, fn){ return function(){ return fn.apply(newObj, arguments); } } function Drag( config ){ this.moveTarget = T.dom.get( config.id ); this.startLeft = parseInt(this.mov...
代码如下： 代码如下: 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...
这个可与前两个不同了，这个是拖拽到指定的区域内的特效。其实逻辑方式差不多，只不过不同的是 找到目标元素，用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...
直接在本地是支持IE6的，有个问题就是，鼠标点击的时候光标会变为选择文字的光标，不知道应该怎么处理这个问题呢？ 在此记录一下代码： 简单拖拽扩展 *{margin:0;padding:0;} #outwarp{ margin:20px auto; width:600px; height:600px; background:#fff; border:1px solid #333; position: relative; } .controlBox{ width:200px; height:200px; position: absolute; left:25px; top:50px; background:#ccc; font-size:12px; col...
mousedown 的时候创建拖动对象，mouseup的时候释放对象，原理弄清楚了其实很简单。 简单拖拽实现代码： 简单拖拽实现 *{margin:0;padding:0;} #box{ margin:20px auto; position:relative; width:400px; height:400px; background:#ccc; border:1px solid #333; postion:relative; } #dragBox{ width:50px; height:50px; text-align:center; line-height: 50px;position: absolute; background:blue; cursor:move; font-size:12...
代码如下: 拖拽 *{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...
JavaScript拖拽示例网页——解决快速拖拽的问题 .drag{border:1px solid; width:400px; background:#CCCCCC;} #test1{ top:20px;} #test2{ left:40px;} var dragElement = null; var mouseY; var mouseX; var x=""; var y=""; var max = 1; function dragInit(node){ if(node.className == "drag"){ node.onmousedown = down; document.onmousemove = move; node.onmouseover = over; node.style.position = "relativ...