各位老師、各位同學,我今天要示範的網頁介面開發技巧是--拖拉元素調整排序,(停頓兩秒),拖拉元素調整排序...
拍拍手覺得好酷好炫,但一點也不想知道程式該怎麼寫的同學,可由教室後方離開去福利社買冰棒吃囉! 有興趣了解程式開發細節的苦命同學們,則可以留下來看看程式裡用到的技巧:
<title>Drag to Swap Demo</title>
<script src="../Scripts/jquery-1.7.2.min.js"></script>
<script src="../Scripts/kendo/kendo.web.js"></script>
<script src="../Scripts/knockout-2.1.0.js"></script>
<link href="../Content/kendo/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="../Content/kendo/kendo.metro.min.css" rel="stylesheet" type="text/css" />
//將this另指派給self變數,之後以其代表View Model本體,
self.items = ko.observableArray();
//定義加入item的方法, 在items中加入具有name及score屬性的物件
self.addItem = function(name, score) {
self.items.push({ name: name, score: score });
var vm = new viewModel();
//每隔0.5秒加一筆以觀察knockoutJs讓UI即時反應資料變化的效果
//使用jQuery.Deferred處理實現完成時機的同步
vm.addItem("Player" + i, i * 100);
for (var i = 0; i < 5; i++) {
//等待所有job執行完畢,掛上Kendo UI拖拉功能
$.when.apply(null, jobs).then(function () {
var $items = $("span.item");
//加上拖曳特性,hint事件回傳拖曳過程顯示的元素
return e.clone().addClass("drag-item");
//由於kendoDropTarget事件中,被放置對象this非亦無事件屬性可存取
//故使用Closure方式將元素存入$item供drop事件存取
//拖曳到目標元素上方及離開時改變CSS,提供使用者可以放置的提示
dragenter: function (e) { $item.addClass("drop-item"); },
dragleave: function (e) { $item.removeClass("drop-item"); },
//在目標元素上方鬆開滑鼠或手指離開觸控螢幕時觸發drop事件
var $drag = e.draggable.element;
$drop.removeClass("drop-item");
if ($drag.text() == $drop.text()) return;
$items.each(function () {
$elem.data("pos", $elem.position());
var pos = $elem.data("pos");
//$drag與$drop交換位置,使用animate
var dragLeft = $drag.data("pos").left + "px";
var dropLeft = $drop.data("pos").left + "px";
var $moving = $drag.add($drop);
$moving.addClass("move-item");
$drag.animate({ left: dropLeft }, 1000);
$drop.animate({ left: dragLeft }, 1000, function () {
$moving.removeClass("move-item");
var $dragPos = $drag.prev(".item-pos");
$drop.prev(".item-pos").after($drag);
$items.css({ position: "", left: "", top: "" });
html,body { font-size: 9pt; }
font-family: Segoe UI; display: inline-block;
margin-left: 5px; padding: 5px;
width: 80px; height: 25px;
background-color: #0099FF; color: white;
background-color: #FF3300;
-ms-transform: scale(1.1,1.1); /* IE 9 */
-webkit-transform: scale(1.1,1.1); /* Safari and Chrome */
-moz-transform: scale(1.1,1.1); /* Firefox */
#dvList { margin-top: 20px; }
background-color: Purple;
<div id="dvList" data-bind="foreach: items">
<span class='item-pos'></span>
<span class='item-name' data-bind="text: name"></span>
(<span class='item-score' data-bind="text: score"></span>)