鍍金池/ 教程/ PHP/ Yii Framework 開發(fā)教程(42) Zii 組件-Draggable 示例
Yii Framework 開發(fā)教程(16) UI 組件 StarRating 示例
Yii Framework 開發(fā)教程(2) Yii Web 應用基礎
Yii Framework 開發(fā)教程(19) UI 組件 TreeView 示例
Yii Framework 開發(fā)教程(39) Zii 組件-Slider 示例
Yii Framework 開發(fā)教程(45) Zii 組件-Selectable 示例
Yii Framework 開發(fā)教程(44) Zii 組件-Resizable 示例
Yii Framework 開發(fā)教程(8) 使用 FormModel
Yii Framework 開發(fā)教程(42) Zii 組件-Draggable 示例
Yii Framework 開發(fā)教程(18) UI 組件 TextHighlighter 示例
Yii Framework 開發(fā)教程(32) Zii 組件-GridView 示例
Yii Framework 開發(fā)教程(30) Zii 組件-ListView 示例
Yii Framework 開發(fā)教程(9) UI 組件 Widget 概述
Yii Framework 開發(fā)教程(17) UI 組件 TabView 示例
Yii Framework 開發(fā)教程(24) 數(shù)據(jù)庫-DAO 示例
Yii Framework 開發(fā)教程(25) 數(shù)據(jù)庫-Query Builder 示例
Yii Framework 開發(fā)教程(21) UI 組件 自定義 Captcha 示例
Yii Framework 開發(fā)教程(38) Zii 組件-ProgressBar 示例
Yii Framework 開發(fā)教程(20) UI 組件 Captcha 示例
Yii Framework 開發(fā)教程(14) UI 組件 MaskedTextField 示例
Yii Framework 開發(fā)教程(22) UI 組件 Zii 組件簡介
Yii Framework 開發(fā)教程(31) Zii 組件-DetailView 示例
Yii Framework 開發(fā)教程(33) Zii 組件-Accordion 示例
Yii Framework 開發(fā)教程(36) Zii 組件-DatePicker 示例
Yii Framework 開發(fā)教程(6) CComponent 組件
Yii Framework 開發(fā)教程(37) Zii 組件-Dialog 示例
Yii Framework 開發(fā)教程(26) 數(shù)據(jù)庫-Active Record 示例
Yii Framework 開發(fā)教程(29) Zii組件-Menu 示例
Yii Framework 開發(fā)教程(46) Zii 組件-Sortable 示例
Yii Framework 開發(fā)教程(10) UI 組件 自定義組件
Yii Framework 開發(fā)教程(11) UI 組件 ActiveForm 示例
Yii Framework 開發(fā)教程(43) Zii 組件-Droppable 示例
Yii Framework 開發(fā)教程(27) 數(shù)據(jù)庫-關聯(lián) Active Record 示例
Yii Framework 開發(fā)教程(47) 主題 Theme 示例
Yii Framework 開發(fā)教程(48) 多國語言示例
Yii Framework 開發(fā)教程(35) Zii 組件-Button 示例
Yii Framework 開發(fā)教程(3) 為應用添加日志
Yii Framework 開發(fā)教程(23) 數(shù)據(jù)庫-概述
Yii Framework 開發(fā)教程(12) UI 組件 ClipWidget 示例
Yii Framework 開發(fā)教程(41) Zii 組件-Tabs 示例
Yii Framework 開發(fā)教程(34) Zii 組件-AutoComplete 示例
Yii Framework 開發(fā)教程(40) Zii 組件-SliderInput 示例
Yii Framework 開發(fā)教程(5) URL 管理
Yii Framework 開發(fā)教程(4) Hangman 猜單詞游戲?qū)嵗?/span>
Yii Framework 開發(fā)教程(15) UI 組件 MultiFileUpload 示例
Yii Framework 開發(fā)教程(7) 使用 CHtml 創(chuàng)建 Form
Yii Framework 開發(fā)教程(28) Data Provider 簡介
Yii Framework 開發(fā)教程(1) 第一個應用 Hello World
Yii Framework 開發(fā)教程(13) UI 組件 ContentDecorator 示例

Yii Framework 開發(fā)教程(42) Zii 組件-Draggable 示例

CJuiDraggable 可以使包含著其中的其它UI組件實現(xiàn)拖放功能，它封裝了 JUI Draggable 插件。

要使某個 UI 組件可以拖放，下面為使用 CJuiDraggable 的基本用法：


    <?php $this->beginWidget('zii.widgets.jui.CJuiDraggable', array(
        'options'=>array(
                    'cursor'=>'move',
                    ),
                    'htmlOptions'=>array(
                        'style'=>'width: 200px; height: 200px;
                         padding: 5px; border: none solid #e3e3e3;
                         background: #0'
                        ),
                ));
    //anything between beginwidget and endwidget is draggable.
    echo '<img id="image" width="200" src="/project/yii-development-tutorial/images/7303.png">';

    $this->endWidget();
    ?>

所有包含在 beginWidget 和 endWidget 之間的內(nèi)容都可以支持拖放，htmlOptions 部分定義了需要支持拖放的 UI 組件的大小。本例使用拖放一個圖像。

http://wiki.jikexueyuan.com/project/yii-development-tutorial/images/42.1.jpg" alt="picture42.1" />

本例下載