Ajax拖放页面元素(图片)

最新推荐文章于 2024-05-03 11:47:20 发布

weixin_30563319

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量59

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/kimcastle/archive/2012/06/16/2551725.html

版权

最近了解了一点YUI的控件知识.先做个Ajax拖放页面元素(图片)以便学习参考.

现在有一些网站如QQ空间,都允许用户自定义模块,可以任意拖动模块到各个地方去.YUI在这一方面做得比较好.下面以一组图片的方式来说明如何运用Ajax拖放页面元素:

第一步:在<head></head>标签中加入YUI文件的三个链接:yahoo-dom-event.js\ainmation.js\dragdrop.js

然后是我们自己的脚本：ddlist.js还有我直接写在html文档里面的javascript代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>任意拖放图片到某一个区位</title>
<script src="js/yahoo-dom-event.js"></script>
<script src="js/animation.js"></script>
<script src="js/dragdrop.js"></script>
<script src="js/ddlist.js"></script>
<style type="text/css">
li{ list-style:none;float:left;margin:0 16px 16px 0;}
.sortList{ width:202px;}
ul{width:800px;}
</style>
</head>

<body>
<div class="SlideShow">
	<ul id="ul1" class="dropList">
    	<li id="li0" class="sortList"><img src="images/img01.jpg" width="200" height="150"/></li>
        <li id="li1" class="sortList"><img src="images/img02.jpg" width="200" height="150"/></li>
        <li id="li2" class="sortList"><img src="images/img03.jpg" width="200" height="150"/></li>
        <li id="li3" class="sortList"><img src="images/img04.jpg" width="200" height="150"/></li>
        <li id="li4" class="sortList"><img src="images/img05.jpg" width="200" height="150"/></li>
    </ul>
</div>
</body>

在上面的body中要注意写好各个调用的ID。。如id="ul1"

第二步：实现Ajax拖放页面元素

<script type="text/javascript">
    var Dom = YAHOO.util.Dom;
    var Event = YAHOO.util.Event;
    var DDM = YAHOO.util.DragDropMgr;
    
    YAHOO.DDApp = {
        init: function(){
            new YAHOO.util.DDTarget("ul1");
            for(var i=0;i<7;i++){
                new YAHOO.DDList("li"+i);    
            }
        }    
    };
    
    Event.onDOMReady(YAHOO.DDApp.init,YAHOO.DDApp,true);
</script>

首先是初始化三个变量。你会注意到,所有函数和变量名都以YAHOO开头：

其次在加载页面时，我们需要告诉YUI和浏览器我们需要拖动哪些元素。在这里我们要拖动<ul>和其中所有的<li>。。所以把前者设置为一个DDTarget,后者设置为DDList所有实例。

Event.onDOMReady(YAHOO.DDApp.init,YAHOO.DDApp,true);

这个是Event.onDOMReady是一个定制YUI事件。当DOM准备好操时就会触发这个事件。到此我们实现了所有功能。

转载于:https://www.cnblogs.com/kimcastle/archive/2012/06/16/2551725.html

weixin_30563319

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax拖放页面元素(图片)

最近了解了一点YUI的控件知识.先做个Ajax拖放页面元素(图片)以便学习参考.现在有一些网站如QQ空间,都允许用户自定义模块,可以任意拖动模块到各个地方去.YUI在这一方面做得比较好.下面以一组图片的方式来说明如何运用Ajax拖放页面元素:第一步:在<head></head>标签中加入YUI文件的三个链接:yahoo-dom-event.js\ainmation....
复制链接

扫一扫