jQuery-UI 拖动Div交换位置

最新推荐文章于 2023-04-28 18:01:04 发布
最新推荐文章于 2023-04-28 18:01:04 发布
阅读量7.1k 收藏 4
点赞数
分类专栏： javascript html 


<!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/


tyasdxx
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery 实现DOM元素拖拽交换位置的实例代码
11-20
实现步骤 1.html + bootstrap 布局画3个面板。 注：面板样式 position 属性必须是绝对位置或者相对位置。 2.监听面板的的 mousedown事件。 记录当前对应面板的位置target_index，设置面板透明拖动。 3.监听当前被拖动的面板的mousemove事件。 根据鼠标移动的位置和面板的相对位置计算出面板应该出现的新位置，就将面板位置设置为新位置。 4.监听当前被拖动的面板的mouseup事件。 当松开鼠标时，查看当前鼠标所在位置对应的面板的位置exchange_index。对比两个位置，若不一样，说明需要交换这两个位置对应的面板内容，否则直接使被拖动面板回原
jQueryUI -- 交互事件（拖拽，修改尺寸，交换位置）
RedGuy_anluo的博客
05-17 3298
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>交互</title> <script src="jquery-2.2.3.min.js"></script> <script src="jquery-ui.min.js"></script> <link href="jqu
使用jquery实现div删除和左右移动更换顺序的功能
徊忆羽菲
09-28 340
使用jquery实现div左右移动更换顺序html代码 html代码 <div class="col-md-8 col-sm-8 col-xs-12 albumImages"> <div class="albumOneImages"> <div class="viewThumb"> <p class="diyControl"> <span class="diyLeft" onclick="albumLeftMove(this)">&
jquery拖动div交换位置
stelin
07-28 3607
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &
jquery实现可拖拽布局
热门推荐
来一颗砂糖橘
04-28 2万+
前端实现可拖拽布局Jquery
jquery两个div互换_Jquery 动态交换两个div位置并添加Css动画效果
weixin_39666550的博客
12-21 637
前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置，常见的思路大多是不考虑原始位置，直接采用append或者appendTo方式将两元素进行添加，该法未考虑原始位置，仅会添加为元素的最后一子元素。今天将给大家介绍一种位置交换方式(判断兄弟元素是否存在)，并添加简单的css效果。设计思路判断元素后边是否存在兄弟元素；存在则通过insertBefore方法将另一元素添加至其兄弟元素前，否则则...
jquery实现鼠标拖拽div改变位置
domunweb的博客
12-07 1340
废话不多说，直接上代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>jquery实现鼠标拖拽div改变位置</title> <script src="./http_ajax/js/jquery.js">&l
jquery 拖动排序|拖拽
webnoties的专栏
12-09 1105
主要参考http://jqueryui.comhttp://jqueryui.com/sortable/ jQuery UI Sortable - Default functionality #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { m
jQuery实现鼠标拖动div改变位置、大小
As_zyh的博客
04-08 3473
实现类似windows窗体的效果，在中间拖动改变div位置，在边缘拖动改变div大小，鼠标在相应的位置改变成相应的形状 $(".test1").mousemove(function(e){ $(".test1").unbind("mousedown"); $(".test1").css("cursor","default"); //$("span > b").text(parseInt($("div"
jQuery-----实现拖拽td单元格到其他上面，实现td内容交换的源码分析
define_LIN的博客
09-06 1840
基于jQuery，实现td单元格的拖拽和交换 &amp;lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;style&amp;gt; td.hover{border:dotted 3
jquery两个div互换_使用jQuery实现两个div中按钮互换位置的实例代码
weixin_30960995的博客
02-26 524
效果如下代码如下：$(function() {//定义一个变量等于所有button按钮var btns = $("button");//for循环进行遍历for(var i = 0; i < btns.length; i++) {//i控制他的下标确定的是那个按钮的点击事件btns[i].onclick = function() {//判断如果此按钮的父控件是div1if($(this).p...
JQ实现DIV大小、位置拖动调整源码
11-10
JQ实现DIV大小、位置拖动调整源码，完美无措
jquery+ajax实现鼠标拖拽图片位置交换
05-31
原先图片位置是 img1 img2 img3 经过鼠标拖拽后变成 img3 img2 img1
鼠标拖动divjquery-ui-1.11.0.rar
09-01
鼠标拖动元素框架有样例 ,解压后进入直接就能运行
jquery实现仿JqueryUi可拖动的DIV实例
11-30
本文实例讲述了jquery实现仿JqueryUi可拖动的DIV。分享给大家供大家参考。具体如下： 这是用Jquery写的代码，仿JQUERYUI的Draggable或者是Dialog,希望大家喜欢，写的一个小东西。参考了下网上的其他人写的类似代码，...
jQuery ui drag插件实现浮动div拖动排列布局代码
10-30
jQuery ui drag插件实现浮动div拖动排列布局代码 jQuery ui drag插件实现浮动div拖动排列布局代码
jQuery拖动div元素标签
06-26
利用jquery ui和append实现元素添加，拖动。自定义div大小!
实验-三、数据库安全性(目的、要求和模板).doc
最新发布
04-24
实验-三、数据库安全性(目的、要求和模板).doc
基于Docker搭建K8s集群离线包
04-24
基于Docker搭建K8s集群离线包，包含部署时所需的全部文件，可在内网环境中使用，K8s为1.23.0版本，docker为20.10.9-3版本
jquery 拖动 div 边框
08-06
jquery是一个JavaScript库，它提供了丰富的函数和方法，可以简化JavaScript编程的过程。其中，jquery提供了拖动(div)边框的功能，可以通过以下步骤实现： 1. 首先，在HTML文件中创建一个div元素，设置一个唯一的id，用来标识该div。例如： ```HTML <div id="myDiv"></div> ``` 2. 在JavaScript代码中使用jquery选择器选中该div元素，并调用jquery的draggable方法，来使其可以拖动。例如： ```JavaScript $("#myDiv").draggable(); ``` 这样，通过鼠标点击该div并拖动，就可以改变其位置。 3. 如果想要拖动该div元素的边框而不是整个元素，可以使用jquery的resizable方法。首先需要引入jquery-ui库，然后对选中的div元素调用resizable方法。例如： ```HTML <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> ... <div id="myDiv"></div> <script> $("#myDiv").resizable(); </script> ``` 这样，通过在div元素的边框上放置鼠标并拖动，可以改变其尺寸。 总结起来，通过使用jquery的draggable和resizable方法，我们可以实现拖动div元素和拖动div边框的功能。这样可以为网页添加更加灵活的交互效果，使用户能够自由调整元素的位置和尺寸。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值