拖拽图层删除效果 - 飘凌大杂烩
飘凌大杂烩 → 电脑网络手机数码 → 编程技术 → 拖拽图层删除效果
　　　　
　
拖拽图层删除效果
发起人：piaoling　　回复数：1　　浏览数：5899　　最后更新：2009/3/31 22:45:16 by piaoling

选择查看 搜索更多相关主题 　帖子排序：
piaoling 发表于 2009/3/31 22:44:07
拖拽图层删除效果

播放器.html

<html>
<head>
<style type="text/css">
<!--
body { color: #000000; font-family:   "Arial"; font-size: 12pt; margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
td,body,input,select {font-size: 12px;color:#000000;}

body {
background-color: #FFFFDF;

}

body {
background-color: #6f6d6e;
background-image: url();
}
.STYLE9 {color: #FFFFFF}
.b_form5 {
background-color: #F1F5F7;
border: 1px solid #2978A0;
}
-->
</style>

<script language="javascript">
/**
* 代码功能
*
* 滚动图片的全体音乐列表悬停时显示列表内容，及文件名
* 并在悬停时实现拖拽效果，拖拽后可以进行全体音乐列表排序,
* 当拖拽到回收箱时，要将该文件删除并对全体音乐列表进行排序
* 释放后可以恢复滚动.全体音乐列表问新的排序后的列表
*
*
*
* 代码实现思路：
* JS建立两个数组，分别存放播放列表和全体音乐列表。列表数据是数据库中读取的
*
* 拖拽效果和滚动效果代码很多了，我也是找的。（拖拽效果据说是部门里的高人写的）
* 拖拽效果同时要触发删除，我采用的是抓取图片全屏坐标后，进行范围内的鼠标事件触发，准确度比较高
*
* 排序通过HTML表格框架关系实现，然后读入数组。
* 比较郁闷的就是滚动过程中，图片的屏幕位置问题，因为以表格形式表现图片的横向排列，隐藏部分实际位置
* 已经表格外，无法进行拖拽或排序，位置不对。此后我发现因为格式的要求，滚动过程中，每次只能显示3个图片
* 因此，我把滚动部分的代码和悬停时候的代码分做两个层，进行处理。
*
* 最后通过AJAX进行异步进行数据库操作。
*
*                                                          by:heartjump
*/

var music_list_length=0//播放列表当前位置
var music_list=[]//播放列表
var music_all_list=[]//所有音频文件列表

//初始化列表
music_list[0]='http://www.bznet.cn/mtv/pzypdl.wma';
music_list[1]='http://www.baoshengli.com/uploadfile/ggh.mp3';
music_list[2]='http://www.meilaodiy.com/10xiu/other/liangzhu.mid';
music_list[3]='http://www.xyyh.net/hjy/upfile/mp3/B011.mp3';

music_all_list[0]='<td id=mu_0 align=left><img src=images/yp03.GIF id="自定义" width=40 height=40 border=0 alt="123自定义"></td>';
music_all_list[1]='<td id=mu_1 align=left><img src=images/yp04.GIF id="自定义" width=40 height=40 border=0 alt="234自定义"></td>';
music_all_list[2]='<td id=mu_2 align=left><img src=images/yp02.GIF id="自定义" width=40 height=40 border=0 alt="345自定义"></td>';
music_all_list[3]='<td id=mu_3 align=left><img src=images/yp02.GIF id="自定义" width=40 height=40 border=0 alt="456自定义"></td>';
music_all_list[4]='<td id=mu_4 align=left><img src=images/yp04.GIF id="自定义" width=40 height=40 border=0 alt="567自定义"></td>';
music_all_list[5]='<td id=mu_5 align=left><img src=images/yp03.GIF id="自定义" width=40 height=40 border=0 alt="678自定义"></td>';

</script>

<SCRIPT Language ="JAVAScript" src=media.js></script>
<SCRIPT Language ="JAVAScript" FOR=WMPlayer EVENT=playStateChange(ns)>
//自动循环播放
WMPlayer_Chage(ns)
</SCRIPT>
</head>
<body>
<table width="160"   border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">

<tr>
<td width="160" height="21" bgcolor="#016F92">

   <table width="96%"   border="0" align="center" cellpadding="0" cellspacing="0">
   <tr>
<td width="73%" height="21" id=""><span class="STYLE9">我的音频</span></td>
         <td width="19%" style=cursor:pointer onClick="showSet('music');"><span class="STYLE9">编辑</span></td>
         <td width="8%">
      <a href="#"><img src="images/b_cxbk_gb.gif" width="7" height="7" border="0" /></a></td>
       </tr>
       </table>
  
</td>
</tr>

<tr><td height="1" bgcolor="#D3D4D6"></td></tr>
<tr><td height="120">
<div align="center">
    <OBJECT ID=WMPlayer CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="150" height="110">
   <param name="autoStart" value="false">
   <param name="balance" value="0">
   <param name="currentPosition" value="0">
   <param name="currentMarker" value="0">
   <param name="enableContextMenu" value="false">
   <param name="enableErrorDialogs" value="false">
   <param name="enabled" value="true">
   <param name="fullScreen" value="false">
   <param name="invokeURLs" value="false">
   <param name="mute" value="false">
   <param name="playCount" value="1">
   <param name="rate" value="1">
   <param name="uiMode" value="none">
   <param name="volume" value="100">
   </OBJECT>               
   </div>
   </td>
</tr>
<tr><td bgcolor="#D3D4D6">
   <table width="100%" height="20" border="0" cellpadding="0" cellspacing="0" bgcolor="#C7C8CA">
   <tr>
<td width="20%" align="center">
<a style=cursor:pointer onclick="WMPlayer_Previous()">
    <img   src="images/b_cxbk_n05.gif" alt="上一首" width="19" height="19" border="0" /></a></td>
          <td width="20%" align="center">
         <a style=cursor:pointer onclick="WMPlayer.controls.play()">
             <img src="images/b_cxbk_n04.gif" width="19" alt="播放" height="19" border="0" /></a></td>
          <td width="20%" align="center">
         <a style=cursor:pointer onclick="WMPlayer.controls.pause()">
             <img src="images/b_cxbk_n03.gif" width="19" alt="暂停" height="19" border="0" /></a></td>
          <td width="20%" align="center">
         <a style=cursor:pointer onclick="WMPlayer.controls.stop()">
             <img src="images/b_cxbk_n02.gif" alt="停止" width="19" height="19" border="0" /></a></td>
          <td width="20%" align="center">
         <a style=cursor:pointer onclick="WMPlayer_Next()">
         <img src="images/b_cxbk_n01.gif"   alt="下一首"width="19" height="19" border="0" /></a></td>
      </tr>
      </table>
</td>
</tr>
</table>
<script language="javascript">
//开始自动播放
if (!music_list.length==0)
{
WMPlayer.url=music_list[music_list_length];
WMPlayer.controls.play();
}
</script>
<table width="160"   border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" id="music" style="display:none">
<tr>
<td width="160" height="21" bgcolor="#016F92">
   <table width="96%"   border="0" align="center" cellpadding="0" cellspacing="0">
       <tr>
      <td width="73%" height="21"><span class="STYLE9">我的音频</span></td>
         <td width="19%" style=cursor:pointer onclick="Save_Queue('mu','MUSIC','1231231323')"><span class="STYLE9">保存</span></td>
         <td width="8%"><a href="#"><img src="images/b_cxbk_gb.gif" width="7" height="7" border="0" /></a></td>
       </tr>
       </table>
    </td>
</tr>

<tr><td height="1" bgcolor="#D3D4D6"></td></tr>

<tr>
<td>
   <table width="100%"   border="0" cellspacing="0" cellpadding="0">
       <tr>
      <td height="25" colspan="4"> 播放音频</td>
       </tr>
       <tr>
      <td>
<DIV id=music_mar style="OVERFLOW: hidden; WIDTH: 140; COLOR: #ffffff"></DIV>
         <DIV id=music_show style="display: none;"></DIV>
         </td>
         <td id="mu_c">
         <div align="right"><img id="mu_c" src="images/ljx.gif" width="20" height="24" border="0"></div></td>
       </tr>
       </table>
</td>
</tr>

<tr><td height="1" colspan="2" bgcolor="#016F92"></td></tr>

<tr>
<td>
<form action="上传" id="upmusic" method="POST" ENCTYPE="multipart/form-data">
   <table width="100%"   border="0" cellspacing="0" cellpadding="0">
       <tr>
      <td width="35%" height="25"> 地址</td>
      <td width="65%" align="left">
      <input type="hidden" value="<?echo $blogid?>" name="blogid">
      <input type="hidden" value="MUSIC" name="media">
      <input name="musicfile" type="file" class="b_form5" size="8"></td>
       </tr>
       </table>
       <table width="100%"   border="0" cellspacing="0" cellpadding="0">
       <tr>
         <td width="35%"> 名称</td>
         <td width="35%" align="left"><input name="name" type="text" class="b_form5" size="13"/></td>
         <td onclick="submit()" width="30%"> 上传</td>
       </tr>
       </table></form>
</td>
</tr>
</table>
</body>
<SCRIPT language="javascript">
var music_k=0 //显示位置

music_show_Marquee();
var music_Mar=setInterval(music_Marquee,50);

function music_Marquee()
{

if (music_mar.scrollLeft>(music_all_list.length*45+10))
{
   music_k=0;
   music_mar.scrollLeft=0;
}

if (music_mar.scrollLeft%45==0 && music_mar.scrollLeft!=0)
{

   music_k++;
}
 
music_mar.scrollLeft++;
}

music_mar.onmousemove=function()
{
clearInterval(music_Mar);

var str1
if ((music_all_list.length-music_k)<=3)
{

   str1="<table height=43   border=0 cellpadding=0 cellspacing=5><tr id=mu>";
   for (var num=(music_all_list.length-3);num<music_all_list.length;num++)
str1+=music_all_list[num];
   str1+="</tr></table>";
}
else
{
   str1="<table height=43   border=0 cellpadding=0 cellspacing=5><tr id=mu>";
   for (var num=music_k;num<(music_k+3);num++)
str1+=music_all_list[num];
   str1+="</tr></table>";
}

music_show.style.enabled = true;
music_mar.innerHTML="";
music_mar.style.display="none";
music_show.innerHTML=str1;
music_show.style.display="";
music_mar.style.enabled = false;
my_move('MUSIC',music_all_list);
return;
}

music_show.onmouseleave=function music_leave()
{
if (!on_mydrage)//没出现拖拽效果
{
   //更新列队
   newstr=innerHTMLtoarray(music_show.innerHTML);

   for (var j=0; j<3; j++)
   {
if (newstr[j])
music_all_list[music_k+j]=newstr[j];
else
music_all_list[music_k+j]="";
   }
 
   for (var f=0; f<music_all_list.length; f++)
   {
if (music_all_list[f]=="")
{
for(var b=f; b<music_all_list.length; b++)
    music_all_list=music_all_list[b+1];

music_all_list.length--;
}
   }
 
   music_show_Marquee();
   music_Mar=setInterval(music_Marquee,50);
}
}

function music_show_Marquee()//滚动加载
{
var str
str="<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace=0><TR><TD vAlign=top><table height=43   border=0 cellpadding=0 cellspacing=5><tr id=mu>";
for (var k=0;k<music_all_list.length;k++)
   str+=music_all_list[k];
str+="</tr></table></TD><TD vAlign=top><font color=#ffffff>11231231231231231231123213213231232321313</font></TD></TR></TABLE>";

music_mar.style.enabled = true;
music_show.innerHTML="";
music_show.style.display="none";

music_mar.innerHTML=str;
music_mar.style.display="";
music_show.style.enabled = false;
}

function showSet(obj) //显示与隐藏层
{
var a;
a = _gel(obj);
if(a.style.display == ""){
   a.style.display = "none";
}else{
   a.style.display = "";
}
}
</SCRIPT>
</html>

 
piaoling 发表于 2009/3/31 22:45:16

media.js

/* 拖拽代码段 */
var k=false;//层加载
var apo=0
var Frameid=[]//加载虚拟层后的对象数组
var ami=null//虚拟层对象
var on_mydrage=false;//拖动效果是否实现

function creatediv()//建立虚拟层
{
if(!ami)
{
   ami=document.createElement("DIV");
   ami.style.display="none";
   ami.style.position="absolute";
   ami.style.cursor="move";
   ami.style.backgroundColor="#ffffff";
   ami.style.paddingBottom="0px";
   document.body.appendChild(ami)
}
return ami
}

function _gel(a)
{
return document.getElementById?document.getElementById(a):null;
}

function my_move(media,md_all_list)
{
//初始化
k=false;//层加载
apo=0;
Frameid=[];//加载虚拟层后的对象数组
ami=null;//虚拟层对象
on_mydrage=false;

var Frameid = Array()//外层列表

if (media=='MUSIC')
{

   if(_gel("mu"))//id为music的外层
   {
Frameid[0] =   _gel("mu");//内层id名,标签名<td id="mu"></td>
k=true;
   }
}

if(k)
{
   drag_move(Frameid,md_all_list);
   k=false;
}

}

function drag_move(Fid,md_all_list)//加载层信息
{
Frameid=Fid;
for(var a=0;a<Frameid.length;a++)//外框架层循环加载
{
   for(var b=0;b<md_all_list.length;b++)//子层循环加载
   {
var dragid=_gel(Frameid[a].id+"_"+b)
if (!dragid) continue;

dragid.module = dragid;
my_drag.init(dragid);//拖动初始化

dragid.onDragStart=function(af,ag)
{
clearInterval(apo);//重置

var Mydiv=this.module;

Positioning(Mydiv);//确定要移动对象的全屏位置

Mydiv.origNextSibling = Mydiv.nextSibling;//移动到新位置

var VirtualDIV=creatediv();

VirtualDIV.style.left = event.clientX-Mydiv.offsetWidth/2;
VirtualDIV.style.top = PagePos(Mydiv,false);

VirtualDIV.style.height = Mydiv.offsetHeight;
VirtualDIV.style.width = Mydiv.offsetWidth;

VirtualDIV.style.display = "block";
VirtualDIV.style.opacity = 0.8;
VirtualDIV.style.filter = "alpha(opacity=80)";
VirtualDIV.innerHTML = Mydiv.innerHTML;
VirtualDIV.className = Mydiv.className;
this.dragged=false;
on_mydrage=true;
};

dragid.onDrag=function(af,ag)
{
this.dragged=true;
Queue(this.module,af,ag,"Ins");//插入队列
};

dragid.onDragEnd=function(af,ag)
{
if(this.dragged)
{
    //释放激活;
    if (this.module.parentNode.id+'_c')//判断是否有垃圾桶，id规则mu_c
    {
   //增加垃圾桶屏幕位置
   var TrashX = PagePos(_gel(this.module.parentNode.id+'_c'),true);
   var TrashY = PagePos(_gel(this.module.parentNode.id+'_c'),false);
   var DivX = PagePos(creatediv(),true) + parseInt(creatediv().style.width)/2
      var DivY = PagePos(creatediv(),false)/* - parseInt(creatediv().style.height)*/

      if (TrashX+25 > DivX && TrashX-5 < DivX && DivY < TrashY+29 && DivY > TrashY-5)//垃圾桶触发范围
   {
   if (confirm("您是否要删除该文件？")==true)
   {
       creatediv().style.display="none";
       Queue(this.module,af,ag,"Del");
   }
   else
   {
       apo=Release(this.module,150,15);//释放的效果
   }
  
   }
   else
   {
   apo=Release(this.module,150,15);//释放的效果
   }
    }else apo=Release(this.module,150,15);//释放的效果
  
    on_mydrage=false;
}
else
{
    creatediv().style.display="none"
  
    if(this.href)
    {
   if(this.target)
   {
   window.open(this.href,this.target)
   }
   else
   {
   document.location=this.href
   }
    }
}
this.target=null;this.href=null;
}
   }
}

}

var my_drag=
{
"obj":
null,
"init":
function(a)
{
a.onmousedown=my_drag.start;
if(isNaN(parseInt(creatediv().style.left)))
creatediv().style.left="0px";
if(isNaN(parseInt(creatediv().style.top)))
creatediv().style.top="0px";
a.onDragStart=new Function();
a.onDragEnd=new Function();
a.onDrag=new Function();
},
"start":
function(a)
{
var aa=my_drag.obj=this;

a=my_drag.fixE(a);
var ab=parseInt(creatediv().style.top);
var ac=parseInt(creatediv().style.left);

aa.onDragStart(ac,ab,a.clientX,a.clientY);
aa.lastMouseX=a.clientX;
aa.lastMouseY=a.clientY;
document.onmousemove=my_drag.drag;
document.onmouseup=my_drag.end;
return false
},
"drag":
function(a)
{

a=my_drag.fixE(a);
var aa=my_drag.obj;
var ab=a.clientY;
var ac=a.clientX;
var ad=parseInt(creatediv().style.top);
var ae=parseInt(creatediv().style.left);
var af,ag;af=ae+ac-aa.lastMouseX;
ag=ad+ab-aa.lastMouseY;

creatediv().style.left=af+"px";
creatediv().style.top=ag+"px";
aa.lastMouseX=ac;
aa.lastMouseY=ab;
aa.onDrag(af,ag,a.clientX,a.clientY);
return false
},
"end":
function()
{
document.onmousemove=null;
document.onmouseup=null;
my_drag.obj.onDragEnd(parseInt(creatediv().style.left),parseInt(creatediv().style.top));
my_drag.obj=null
},
"fixE":
function(a)
{
if(typeof a=="undefined")
a=window.event;
if(typeof a.layerX=="undefined")
a.layerX=a.offsetX;
if(typeof a.layerY=="undefined")
a.layerY=a.offsetY;
return a
}
};

function Positioning(a)
{
for(var aa=0;aa<Frameid.length;aa++)
{
   var ab=0;
   for(var ac=0;ac<Frameid[aa].childNodes.length;ac++)
   {
var ad=Frameid[aa].childNodes[ac];
if(ad==a)
ab=ad.offsetHeight;
ad.pagePosLeft=PagePos(ad,true);
ad.pagePosTop=PagePos(ad,false)-ab
   }
}
}

function Queue(div,m_x,m_y,doi)//队列操作
{
var ac=null;
var ad=100000000;
var app;

for(var a=0;a<Frameid.length;a++)
{
   for(var b=0;b<Frameid[a].childNodes.length;b++)
   {
var ag=Frameid[a].childNodes;
if(ag==div) continue;
var ai=Math.sqrt/*平方根*/(Math.pow(m_x-ag.pagePosLeft,2)+Math.pow(m_y-ag.pagePosTop,2)/*平方函数*/);
if(isNaN(ai)) continue;

if(ai<ad)
{
ad=ai;
ac=ag;
}
   }
}
if(ac!=null&&a.nextSibling!=ac)
{
   if (doi=="Ins")
   {
ac.parentNode.insertBefore(div,ac);//队列插入
div_display(div);
   }
   else if (doi=="Del")
   {
ac.parentNode.removeChild(div);
   }
}
}

function div_display(a)
{
a.parentNode.style.display="none";
a.parentNode.style.display="";
}

function Release(div,aa,ab)
{
var ac=parseInt(creatediv().style.left);
var ad=parseInt(creatediv().style.top);

var ae=(ac-PagePos(div,true))/ab;
var af=(ad-PagePos(div,false))/ab;

return setInterval(function()
{
   if(ab<1)
   {
clearInterval(apo);
creatediv().style.display="none"
ami.innerHTML = ''
return
   }
   ab--;
   ac-=ae;
   ad-=af;
   creatediv().style.left=parseInt(ac)+"px";
   creatediv().style.top=parseInt(ad)+"px";
}
,aa/ab
)
}

function PagePos(a,aa)//屏幕位置读取
{
var ab=0;
while(a!=null)
{
   ab+=a["offset"+(aa?"Left":"Top")];
   a=a.offsetParent;
}
return ab
}

/* 音频播放代码段 */
function WMPlayer_Chage(ns)//循环播放
{
if(ns == 8)//播放结束，进入下一曲
   setTimeout('WMPlayer_Next()', 1000);
}

function WMPlayer_Next()
{
if (!music_list.length==0)
{
   WMPlayer.controls.stop();
   if (music_list_length==music_list.length-1)
music_list_length=0;
   else
music_list_length++;
   WMPlayer.url=music_list[music_list_length];
   WMPlayer.controls.play();
}
}

function WMPlayer_Previous()
{
if (!music_list.length==0)
{
   WMPlayer.controls.stop();
   if (music_list_length==0)
music_list_length=music_list.length-1;
   else
music_list_length--;
   WMPlayer.url=music_list[music_list_length];
   WMPlayer.controls.play();
}
}

//保存代码
function Save_Queue(name,media,blogid)
{
if (_gel(name))
{
   var code='a' //MEDIA列表文件ID
 
   for (var lb=0;lb<_gel(name).childNodes.length;lb++)
if (code=='a')
code = _gel(name).childNodes[lb].childNodes[0].id;
else
code = code + "|"   + _gel(name).childNodes[lb].childNodes[0].id;
   //ajax发送数据
   AjaxObj = getXMLHTTPRequest();
   AjaxObj.onreadystatechange = function(){};
   AjaxObj.open("POST","module/savemedia.php",true);
   AjaxObj.setRequestHeader('Content-type','application/x-www-form-urlencoded');
   AjaxObj.send("str="+code+"&class="+media+"&blogid="+blogid);
 
   if (media=="MUSIC")
   {
alert("音频列表保存成功！");
location.href="addmodule.php?wid="+blogid;
   }
   else
   {
alert("视频列表保存成功！");
location.href="addmodule.php?wid="+blogid;
   }
}
else
{
   if (media=="MUSIC")
alert("音频列表出现错误！");
   else
alert("视频列表出现错误！");
}
}

function getXMLHTTPRequest()
{
var xRequest=null;
if (window.XMLHttpRequest)
{
   xRequest=new XMLHttpRequest();
}
else if (typeof ActiveXObject != "undefined")
{
   xRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
return xRequest;
}


function innerHTMLtoarray(str)//HTML转换为数组队列
{
var start=str.indexOf('<TD ');
var end=str.lastIndexOf('</TD>');
var str2=str.substring(start,end+5);

var i=0;
var strk=[]
while (!str2=="")
{
   var en=str2.indexOf('</TD>');
   strk=str2.substring(0,en+5);
   str2=str2.substring(en+5,str2.len);
   i++;
}
return strk;
}
返回页首↑


津ICP备09000164号

联系我们 - piaoling Corporation - 论坛存档 - 返回顶端
Powered by BBSXP 2007 ACCESS © 1998-2025
Server Time 2025/1/15 6:59:00
Processed in 0.02 second(s)
飘凌大杂烩