仿Google和Windows Live的拖拽

2024-04-03 06:06:49

New Document

body
{
margin:10px;
}

#dragHelper
{
position:absolute;/*重要*/
border:2px dashed #000000;
background-color:#FFFFFF;
filter: alpha(opacity=30);
}

.normal
{
position:absolute;/*重要*/
width:300px;
#height:10px;
border:1px solid #666666;
background-color:#FFFFFF;
}

.over
{
position:absolute;/*重要*/
width:300px;
#height:10px;
border:1px solid #666666;
background-color:#f3f3f3;
filter: alpha(opacity=50);
}

.dragArea {
CURSOR: move;
}

Cobao	........	- x
地址:http://www.cobao.cn
关键字:
说明:

新浪	........	- x
地址:http://www.sina.com.cn
关键字:
说明:

网易	........	- x
地址:http://www.163.com
关键字:
说明:

QQ	........	- x
地址:http://www.qq.com
关键字:
说明:

= 0 && dragObjLeft =0)
dragObj.style.top = dragObjTop;

repaint();
}
}

//克隆对象
function cloneObject(srcObj, destObj){
destObj = srcObj.cloneNode(true);
}

function makeDraggable(element){
element.setAttribute("isDragObj", "y");
}

function repaint(){
for(i=0; i0 && parseInt(dragObj.style.top)parseInt(dragObjs[dragObjPos+1].style.top)){
dragObjs[dragObjPos] = dragObjs[dragObjPos+1];
dragObjs[dragObjPos+1] = dragHelper;
dragObjPos = dragObjPos + 1;
}
paintDragObjs();
dragObjs[dragObjPos] = dragObj;

}

function paintDragObjs(){
var h = 40;
for(i=0; i

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

仿Google和Windows Live的拖拽

New Document body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alpha(opacity=30); } .normal { position:absolute;/*重要*/ width:300px; #height:10px; border:1px solid #666666; backgr
Android贝塞尔曲线初步学习第二课仿QQ未读消息气泡拖拽黏连效果

上一节初步了解了Android端的贝塞尔曲线,这一节就举个栗子练习一下,仿QQ未读消息气泡,是最经典的练习贝塞尔曲线的东东,效果如下附上github源码地址:https://github.com/MonkeyMushroom/DragBubbleView 欢迎star~ 大体思路就是画两个圆,一个黏连小球固定在一个点上,一个气泡小球跟随手指的滑动改变坐标.随着两个圆间距越来越大,黏连小球半径越来越小.当间距小于一定值,松开手指气泡小球会恢复原来位置:当间距超过一定值之后,黏连小球消失,气泡小球
jQuery的ztree仿windows文件新建和拖拽功能的实现代码

前面的话:zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.专门适合项目开发,尤其是树状菜单.树状数据. ztree官方文档:http://www.treejs.cn/v3/api.php 想要实现的效果: 需要的功能: 1:首先实现一颗jQuery的ztree的树形菜单,这个很简单,直接引用官方文档即可 2:点击新建组的按钮,会出现一个input对话框,填写想要新建的名称,在树形菜单上添加了一个父节点菜单
HTML5附件拖拽上传drop & google.gears实现代码

腾讯微博也已近实现了拖拽上传.其实很简单. 由于没有服务器支持在文章里不能做上传演示,下载实例拖拽上传需要什么支持 1:需要浏览器支持 drop 事件.(响应拖拽事件获取file对象); 2:XMLHttpRequest 对象有 sendAsBinary 方法(用于发送数据); 以上两个条件目前仅有 firefox 能达到. chrome 第一项达标,第2项可以使用 google.gears 来模拟. 所以能实现拖拽上传的浏览器有 firefox3.6 + 和 chrome7+. 如何实现
对google个性主页的拖拽效果的js的完整注释[转]

作者:Tin出处:http://www.blogjava.net/iamtin/archive/2006/04/27/43668.html代码:http://www.blogjava.net/Files/iamtin/google_drag.rar 复制代码代码如下: // 工具类,使用Util的命名空间,方便管理 var Util = new Object(); // 获取http header里面的UserAgent,浏览器信息 Util.getUserAgent = n
PHP实现Google plus的好友拖拽分组效果

你一直在寻找google pls的好友拖拽分组功能吗?google实现的太帅了!我已经使用PHP和jQuery实现了同样的好友拖拽添加分组的应用.本篇PHP教程就来告诉你如何实现,希望我的示例会对你的社交网站项目有所帮助. 效果如下: 示例数据库包含三个表,即用户和用户组之间的关系. 用户表Members 表包含成员(用户)数据,如member_id,member_image等. CREATE TABLE IF NOT EXISTS `members` ( `member_id` int(9)
JS仿iGoogle自定义首页模块拖拽特效的方法

本文实例讲述了JS仿iGoogle自定义首页模块拖拽特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!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
Android自定义ListView实现仿QQ可拖拽列表功能

我们大致的思路,其实是这样子的,也是我的设想,我们可以先去实现一个简单的ListView的数据,但是他的Adapter,我们可以用系统封装好的,然后传递进去一个实体类,最后自定义一个listview去操作,所以我们先把准备的工作做好,比如? list_item.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.a
Android仿QQ未读消息--红点拖拽删除【源代码】

本Demo是一款仿qq未读消息拖拽删除的例子,继承RelativeLayout的WaterDrop实现了圆形图标功能.继承ImageView的CircleImageView圆形图片功能.效果非常不错.很适合有圆形设计的哥们.效果图片如下 CircleImageView核心代码 private void updateShaderMatrix() { float scale; float dx = 0; float dy = 0; mShaderMatrix.set(null); if (mBitm
Android仿qq消息拖拽效果

本文实例为大家分享了Android仿qq消息拖拽效果展示的具体代码,供大家参考,具体内容如下这是一个仿qq消息拖拽效果,View和拖拽实现了分离,TextView.Button.Imageview等都可以实现相应的拖拽效果:在触发的地方调用 MessageBubbleView.attach(findViewById(R.id.text_view), new MessageBubbleView.BubbleDisappearListener() { @Override public void d

仿Google和Windows Live的拖拽

相关推荐

随机推荐