DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 使用yui3實現最簡單拖動
使用yui3實現最簡單拖動
編輯:關於JavaScript     

網頁制作POLUOLUO文章簡介:如果你有用javascript寫過拖動的話,應該知道是有多麼麻煩的,不過yui3為大家提供了一個非常方便的方法實現拖動,今天我們先來看看使用yui3實現最簡單拖動,首先貼出代碼(如果你感興趣,可以點擊這裡查看效果):上面我有相應的解釋,這些解釋都是我的個人理解,可能不

如果你有用javascript寫過拖動的話,應該知道是有多麼麻煩的,不過yui3為大家提供了一個非常方便的方法實現拖動,今天我們先來看看使用yui3實現最簡單拖動,首先貼出代碼(如果你感興趣,可以點擊這裡查看效果):上面我有相應的解釋,這些解釋都是我的個人理解,可能不完全對,但是這樣就可以實現拖動了,如果你有正確的解釋,請與我聯系,謝謝!或者請留言。

//引用yui-min.js,將其放到head之中
<script src=“http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js” type=“text/javascript”></script>
//body中的內容
//結構
<div id=“demo”><h2>x</h2>Drag Me</div>
//js代碼
<script type=“text/javascript”>
YUI().use(‘dd’,function(Y) {
var node = Y.get(‘#demo’);//使用Y.get獲取id為demo的對象,與原生js中的document.getElementById()相同,功能會更強一些。
node.plug(Y.plugin.Drag);//我的理解是確定被拖動的對象
node.dd.addHandle(‘h2′);//用於控制拖動的地方,這裡就是當鼠標移到h2上的時候就可以拖動
node.dd.addHandle(”);//這樣寫的話,就是在demo的任何位置都可拖動
});
</script>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved