30天學會 MooTools 教學(12): Drag.Move來實現拖放

var myDrag = new Drag.Move(dragElement, {
    // Drag.Move的選項
    droppables: dropElement,
    container: dragContainer,
    // Drag的選項
    handle: dragHandle,
    // Drag.Move 的事件
    // Drag.Move事件會傳遞拖動的元素， 
    // 還有可接納拖動元素的元素（droppable）
    onDrop: function(el, dr) {
        // 顯示拖動到可接納元素的元素的id
        alert(dr.get('id'));
    },
    // Drag事件
    // Drag事件傳遞拖動的元素
    onComplete: function(el) {
        alert(el.get('id'));
    }
});

// 這裡我們通過id定義了一個元素
var dragElement = $('drag_element');
// 這裡我們通過class定義了一組元素
var dropElements = $$('.drag_element');
 
var dragContainer = $('drag_container');
// 現在創建我們的Drag.Move對象
var myDrag = new Drag.Move(dragElement , {
    // Drag.Move選項
    // 把我們上面定義的droppable賦值給droppables
    droppables: dropElements ,
    // 把我們的容器元素變量賦值給容器
    container: dragContainer 
});

var dragContainer = $('drag_container');
 
var myDrag = new Drag.Move(dragElement , {
    // Drag.Move選項
    droppables: dropElements ,
    container: dragContainer ,
    // Drag.Move事件
    // Drag.Move函數將傳遞可拖動的元素（這個例子中是'el'）
    // 還有接受拖動元素的元素（這個例子中是'dr'）
    onDrop: function(el, dr) {
        // 下面這句的意思大概是：
        // 如果你拖動的元素不是到了可以接受拖動元素的元素的範圍內
        if (!dr) { 
            // 什麼都不做
        }
        // 否則（從邏輯上講，
        // 如果你拖動的那個的元素到了可接受拖動元素的元素範圍內）
        // 做這一件事件
        else {
            // 在這裡做一些事情
        };
    },
    onLeave: function(el, dr) {
        // 這個事件將在拖動的元素離開可接受拖動對象的元素時觸發
    },
    onEnter: function(el, dr) {
        // 這個事件將在拖動的元素進入可接受拖動對象的元素時觸發
    }
});

var myDrag = new Drag.Move(dragElement , {
    // Drag選項
    snap: 10 
});

// 這裡我們使用了一個類選擇器建立了一個數組
// 這將使得我們很輕易地添加多個控制對象，如果我們決定要有多個可接受拖動元素的元素
var dragHandle = $('drag_handle');
var myDrag = new Drag.Move(dragElement , {
    // Drag選項
    handle: dragHandle 
});

var myDrag = new Drag.Move(dragElement , {
    // Drag選項
    // Drag選項將把拖動的元素作為參數傳遞
    onStart: function(el) {
        // 在這裡放置開始拖動時你要做的任何事情
    }
});

var myDrag = new Drag.Move(dragElement , {
    // Drag選項
    // Drag選項將把拖動的元素作為參數傳遞
    onDrag: function(el) {
        // 在這裡放置開始拖動時你要做的任何事情
    }
});

var myDrag = new Drag.Move(dragElement , {
    // Drag選項
    // Drag選項將把拖動的元素作為參數傳遞
    onComplete: function(el) {
        // 在這裡放置開始拖動時你要做的任何事情
    }
});

window.addEvent('domready', function() {
    var dragElement = $('drag_me');
    var dragContainer = $('drag_cont');
    var dragHandle = $('drag_me_handle');
    var dropElement = $$('.draggable');
    var startEl = $('start');
    var completeEl = $('complete');
    var dragIndicatorEl = $('drag_ind');
    var enterDrop = $('enter');
    var leaveDrop = $('leave');
    var dropDrop = $('drop_in_droppable'); 
 
    var myDrag = new Drag.Move(dragElement, {
    // Drag.Move選項
    droppables: dropElement,
    container: dragContainer,
    // Drag選項
    handle: dragHandle,
    // Drag.Move事件
    onDrop: function(el, dr) {
        if (!dr) { }
 
        else {
            dropDrop.highlight('#FB911C'); //橙色閃爍
            el.highlight('#fff'); //白色閃爍
            dr.highlight('#667C4A'); //綠色閃爍
        };
    },
    onLeave: function(el, dr) {
        leaveDrop.highlight('#FB911C'); //橙色閃爍
    },
    onEnter: function(el, dr) {
        enterDrop.highlight('#FB911C'); //橙色閃爍
    },
    // Drag事件
    onStart: function(el) {
        startEl.highlight('#FB911C'); //橙色閃爍
    },
    onDrag: function(el) {
        dragIndicatorEl.highlight('#FB911C'); //橙色閃爍
    },
    onComplete: function(el) {
        completeEl.highlight('#FB911C'); //橙色閃爍
    }
    });
});

/* 下面這個定義通常是不錯的主意 */
body {
    margin: 0
    padding: 0
}
 
/* 確保可拖動的元素有"position: absolute" */
/* 並設置開始時的left和top屬性 */
#drag_me {
    width: 100px
    height: 100px
    background-color: #333
    position: absolute
    top: 0
    left: 0
}
 
 
#drop_here {
    width: 200px
    height: 200px
    background-color: #eee
}
 
/* 確保拖動的容器有「position:relative」 */
#drag_cont {
    background-color: #ccc  
    height: 600px 
    width: 500px
    position: relative
    margin-top: 100px
    margin-left: 100px
} 
 
#drag_me_handle {
    width: 100%
    height: auto
    background-color: #666
}
 
#drag_me_handle span {
    display: block
    padding: 5px
}
 
 
.indicator {
    width: 100%
    height: auto
    background-color: #0066FF
    border-bottom: 1px solid #eee
}
 
.indicator span {
    padding: 10px
    display: block
}
 
.draggable {
    width: 200px
    height: 200px
    background-color: blue
}

<div id="drag_cont">
    <div id="start" class="indicator"><span>拖動開始</span></div>
    <div id="drag_ind" class="indicator"><span>拖動中</span></div>
    <div id="complete" class="indicator"><span>拖動結束</span></div>
    <div id="enter" class="indicator"><span>進入了Droppable元素</span></div>
    <div id="leave" class="indicator"><span>離開了Droppable元素</span></div>
    <div id="drop_in_droppable" class="indicator"><span>放進了Droppable元素</span></div>
    <div id="drag_me">
    <div id="drag_me_handle"><span>控制對象</span></div>
    </div>
 
    <div id="drop_here" class="draggable"> </div>
</div>