jquery.ui實現新聞模塊 jquery也有ui，瞭解即可，用的不多，類似element ui 和bootstrap JQuery UI API: jquery.ui實現新聞模塊 draggale拖動，並用屬性handle，指定下拖動手柄 $(".drag-wrapper").draggable ...
jquery.ui實現新聞模塊
jquery也有ui，瞭解即可，用的不多，類似element ui 和bootstrap
JQuery UI API:
jquery.ui實現新聞模塊
draggale拖動，並用屬性handle，指定下拖動手柄
$(".drag-wrapper").draggable({
handle:".drag-bar"
});
見說明書：
sortable排序, 並指定元素的透明度。（就是排序選中的那個元素透明度會改變）
$(".sort-item").sortable({
opacity:0.3
});
見說明書
同理，resizable, 縮放，定義下該元素的縮放方向
$(".resize-item").resizable({
handles:"s"
});
完整代碼
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="jquery-ui.css"> <style type="text/css"> * { margin: 0; padding: 0; } .drag-wrapper { width: 400px; margin: 50px auto 0; /*border: 10px solid #000;*/ } .drag-bar { height: 40px; font-size: 20px; font-weight: bold; line-height: 40px; text-align: center; background-color: #E6E6E6; border-top-left-radius: 5px; border-top-right-radius: 5px; cursor: move; } .resize-item { height: 212px; border: 1px solid #e6e6e6; } .sort-wrapper { height: 100%; overflow: hidden; } .sort-item { list-style: none; padding-top: 10px; } .sort-item li { height: 40px; line-height: 40px; padding-left: 20px; cursor: pointer; } .sort-item li:hover { background-color: #e6e6e6; } </style> </head> <body> <div class="drag-wrapper"> <div class="drag-bar">可拖動、排序、變形的新聞模塊</div> <div class="resize-item"> <div class="sort-wrapper"> <ul class="sort-item"> <li>這是第1條新聞!</li> <li>這是第2條新聞!</li> <li>這是第3條新聞!</li> <li>這是第4條新聞!</li> <li>這是第5條新聞!</li> <li>這是第6條新聞!</li> <li>這是第7條新聞!</li> <li>這是第8條新聞!</li> <li>這是第9條新聞!</li> <li>這是第10條新聞!</li> </ul> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="jquery-ui.js"></script> <script> $(function () { $(".drag-wrapper").draggable({ handle:".drag-bar" }); $(".sort-item").sortable({ opacity:0.3 }); $(".resize-item").resizable({ handles:"s" }); }); </script> </body> </html>
