Ajax拖放页面元素(图片)
生活随笔
收集整理的這篇文章主要介紹了
Ajax拖放页面元素(图片)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近了解了一點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中要注意寫好各個調用的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
總結
以上是生活随笔為你收集整理的Ajax拖放页面元素(图片)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 谷歌云盘和百度云盘文件转存
- 下一篇： 统计通话次数和时间的软件_通话时间统计a