jQuery-UI 拖動Div交換位置

阿新 • • 發佈：2019-01-16

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
  <script>
  $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });
  </script>
</head>
<body>
 
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
 
 
</body>
</html>

頁面：

原文地址：http://jqueryui.com/sortable/

jQuery-UI 拖動Div交換位置

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Default fun

jquery 上下拖動div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

Jquery Tdrag拖動外掛,拖動的div內有input或者select元素,元素內無法編輯或下拉問題解決

專案中需要點選一個按鈕,彈出一個對話方塊,由於對話方塊尺寸很大,顯示了很多東西,其實就是div設定了隱藏和顯示,所以為了讓低解析度的電腦也能方便的檢視內容,就想到能否有外掛支援拖動彈出的div,很幸運,前輩們已經有很多外掛,找到一款Tdrag,很好用,連結如下,使用也

javascript實現可拖動DIV層

百度 -i osi sil weight 拖動 oev solid col 原文發布時間為：2009-05-04 —— 來源於本人的百度文章 [由搬家工具導入]注意以下红色部&

vue實現拖動div元素

() left pan down htm 元素 null col color html： <div id="app1"> <div v-drag class="drag"></div> <div v-drag

jquery 實現拖動文件上傳加進度條

進行 con pos rip file round 默認 dex toupper 通過對文件的拖動實現文件的上傳，主要用到的是HTML5的ondrop事件，上傳內容通道FormData傳輸： //進度條 <div class="parent-dlg" >

前端拖動div 效果

col urn als mouseup use document overflow 前端 author /** * author levi * url http://levi.cg.am */ $(function() { $(document).mouse

unity3d：camera拖動與ui拖動互不影響

if (Input.GetMouseButtonDown(0)) { if (Application.isMobilePlatform &

Jquery實現拖拽div巢狀的iframe不卡頓

css * {padding: 0;margin: 0;box-sizing: border-box;} .main {width: 1000px;height: 700px;position: absolute;left: 50%;top: 50%;margi

彈出可拖動DIV層提示視窗

實現點選彈出可拖動的DIV層 1、程式碼： <!DOCTYPE html> <html> <head> <meta http-equiv="Con

android listview拖拽，拖動item 改變位置

在packages/apps/Music/src/touchIncepter.java中該類提供了listview的拖動效果，並提供介面，在程式介面中實現資料的交換即可。 package com.and.DragListvie

ListView 拖拽Item交換位置

最近一個專案中要求用到交換任意兩個ListView裡面Item位置，需要實現這個功能。因此，本屌也是通過學習相關例子，重繪封裝了一番，並且實現了這個功能。下面，就一起來看看是怎麼樣實現的吧。 1、XML佈局 <?xml version="1.0" encoding

可拖動div

//div的移動事件 var divMove = { o: null, Lastobj: null, init: function (obj) { obj.onmousedown = this.start;

Android下圖片或按鈕等可拖動到任意位置的效果實現原始碼

from： http://www.2cto.com/kf/201207/140218.html Android下圖片可拖動到任意位置的效果下面為Activity的程式碼： 01 public class DraftTest extends Activity { 0

拖動DIV到指定的區域,不是該區域不允許拖動

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t

JS實現拖動div改變大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

MUI 頂部選項卡-可左右拖動(div)

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>頂部選項卡-可左右拖動</title><meta name="viewport"

Unity中實現揹包物品拖動和更換位置

using UnityEngine; using System.Collections; using UnityEngine.UI; using UnityEngine.EventSystems; public class PointMoveContro

最好用的jquery列表拖動排列(由項目提取)

jQuery Easy UI Draggable(拖動)組件

utf-8 agg style 對象 defaults range sheet ole ims 上文已經提到過了 jQuery EasyUI插件引用一般我們經常使用的有兩種方式（排除easyload載入方式），所以本篇要總結的Draggable組件相同有兩種方式載入

jQuery-UI 拖動Div交換位置

相關推薦