<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.shijuanxiti_2_case{
margin:auto;
padding:4px;
height:24px;
}
.shijuanxiti_2_d_t{
float:left;
width:70%;
}
.shijuanxiti_2_d_m{
float:left;
width:10%;
text-align:center;
cursor:pointer;
}
.shijuanxiti_2_d_d{
float:left;
width:10%;
text-align:center;
cursor:pointer;
}
.shijuanxiti_test{
float:left;
padding:0 4px;
width:300px;
*width:292px;
_width:292px;
height:24px;
}
.shijuanxiti_test input{
padding:2px 4px;
width:290px;
*width:282px;
_width:282px;
height:17px;/* height:17px; @edom2009-06-09 */
border:1px solid #6EAFD9;
background-color:#FFF;
}
.shijuanxiti_page{
margin:auto;
width:97%;
background-image:url(../skin/table_line_bg.gif);
background-position:top;
background-repeat:repeat-x;
background-color:#F4F4F4;
border:1px solid #D7D7D7;
height:33px;
}
.shijuanxiti_page_case{
margin:auto;
padding:4px 0 0 0;
width:450px;
}
.shijuanxiti_page_f{
float:left;
padding:0 4px;
color:#949494;
}
.shijuanxiti_page_f span{
padding:0 4px;
color:#949494;
}
.shijuanxiti_page_f span a {
font-size: 12px;
color: #949494;
}
.shijuanxiti_page_f span a:link {
text-decoration: none;
}
.shijuanxiti_page_f span a:visited {
text-decoration: none;
color: #949494;
}
.shijuanxiti_page_f span a:hover {
text-decoration: underline;
color: #2B2B2B;
}
.shijuanxiti_page_f span a:active {
text-decoration: none;
color: #949494;
}
.shijuanxiti_page_c{
float:left;
padding:0 4px;
}
.shijuanxiti_page_spage{
float:left;
margin:0 4px;
width:22px;
height:22px;
border:1px solid #D7D7D7;
text-align:center;
background-color:#949494;
color:#FFF;
font-weight:bold;
_display:inline;
}
.shijuanxiti_page_spage a{
font-size:12px;
color:#FFF;
}
.shijuanxiti_page_spage a:link {
text-decoration: none;
}
.shijuanxiti_page_spage a:visited {
text-decoration: none;
color: #FFF;
}
.shijuanxiti_page_spage a:hover {
text-decoration: underline;
color: #2B2B2B;
}
.shijuanxiti_page_spage a:active {
text-decoration: none;
color: #FFF;
}
.shijuanxiti_page_hpage{
float:left;
margin:0 4px;
width:22px;
height:22px;
border:1px solid #949494;
text-align:center;
background-color:#FFF;
color:#949494;
font-weight:bold;
_display:inline;
}
.shijuanxiti_page_hpage a {
font-size: 12px;
color: #949494;
}
.shijuanxiti_page_hpage a:link {
text-decoration: none;
}
.shijuanxiti_page_hpage a:visited {
text-decoration: none;
color: #949494;
}
.shijuanxiti_page_hpage a:hover {
text-decoration: underline;
color: #2B2B2B;
}
.shijuanxiti_page_hpage a:active {
text-decoration: none;
color: #949494;
}
.shijuanxiti_4_case{
margin:auto;
width:97%;
background-image:url(../skin/table_line_bg.gif);
background-position:top;
background-repeat:repeat-x;
border-top:1px solid #D7D7D7;
border-left:1px solid #D7D7D7;
border-right:1px solid #D7D7D7;
overflow:hidden;
}
.shijuanxiti_4_t_g{
float:left;
width:50%;
height:25px;
line-height:25px;
text-align:center;
font-weight:bold;
letter-spacing:2px;
color:#2B2B2B;
overflow:hidden;
}
.shijuanxiti_4_t_p{
float:left;
width:10%;
height:25px;
line-height:25px;
text-align:center;
font-weight:bold;
letter-spacing:2px;
color:#2B2B2B;
overflow:hidden;
}
.shijuanxiti_4_t_r{
float:left;
width:40%;
height:25px;
line-height:25px;
text-align:center;
font-weight:bold;
letter-spacing:2px;
color:#2B2B2B;
overflow:hidden;
}
.shijuanxiti_4_c{
height:26px;
line-height:26px;
overflow:hidden;
}
.shijuanxiti_4_d_g{
float:left;
width:50%;
height:25px;
line-height:25px;
text-align:center;
color:#2B2B2B;
border-bottom:1px solid #D7D7D7;
}
.shijuanxiti_4_d_p{
float:left;
width:10%;
height:25px;
line-height:25px;
text-align:center;
color:#2B2B2B;
border-bottom:1px solid #D7D7D7;
}
.shijuanxiti_4_d_r{
float:left;
width:40%;
height:25px;
line-height:25px;
text-align:center;
color:#2B2B2B;
border-bottom:1px solid #D7D7D7;
}
.shijuanxiti_4_d_r input{
margin:0 4px;
padding:1px 2px;
width:40px;
height:16px;
border:1px solid #D7D7D7;
font-family:Tahoma;
font-size:12px;
color:#949494;
}
.shijuanxiti_4test{
float:left;
padding:0 4px;
width:60px;
*width:52px;
_width:52px;
height:24px;
}
.shijuanxiti_4test input{
padding:2px 4px;
width:50px;
*width:42px;
_width:42px;
height:17px;/* height:17px; @edom2009-06-09 */
border:1px solid #6EAFD9;
}
.shijuanxiti_conn_4{
float:right;
width:80px;
height:30px;
}
.shijuanxiti_5_test{
float:left;
padding:0 4px;
height:24px;
line-height:24px;
}
.shijuanxiti_5_test span{
padding:0 4px;
color:#975525;
font-weight:bold;
}
.shijuanxiti_5_title{
float:left;
padding:0 4px;
height:24px;
line-height:24px;
color:#949494;
}
.shijuanxiti_5_s_box{
float:left;
width:200px;
}
.shijuanxiti_5_s_erro{
float:left;
width:60px;
}
.shijuanxiti_conn_5{
float:right;
width:240px;
height:30px;
}
.shijuanxiti_5_form_con{
float:left;
padding:0 4px;
width:110px;
height:28px;/* height:28px; @edom 2009-06-09 */
}
.shijuanxiti_5_form_con input{
padding:0 0 0 0px;
*padding:2px 0 0 0;
_padding:2px 0 0 0;
width:100px;
height:24px;
*height:24px;
_height:20px;
cursor:pointer;
border-left:4px solid #6EAFD9;
border-right:1px solid #6EAFD9;
border-bottom:1px solid #6EAFD9;
border-top:1px solid #6EAFD9;
background-color:#FFF;
letter-spacing:4px;
}
</style>
</head>
<body>
<div class="common_front shijuanxiti_2_case" id="shijuanxiti_2_case_1">
<div class="common_front shijuanxiti_2_d_t">选择题</div>
<div class="common_front shijuanxiti_2_d_m" onclick="divAct(this,'up')">上移</div>
<div class="common_front shijuanxiti_2_d_m" onclick="divAct(this,'down')">下移</div>
<div class="common_front shijuanxiti_2_d_d" onclick="divAct(this,'delete')">删除</div>
<div class="debug_erro"></div>
</div>
<div class="erro_07"></div>
<div class="common_front shijuanxiti_2_case" id="shijuanxiti_2_case_2">
<div class="common_front shijuanxiti_2_d_t">填空题</div>
<div class="common_front shijuanxiti_2_d_m" onclick="divAct(this,'up')">上移</div>
<div class="common_front shijuanxiti_2_d_m" onclick="divAct(this,'down')">下移</div>
<div class="common_front shijuanxiti_2_d_d" onclick="divAct(this,'delete')">删除</div>
<div class="debug_erro"></div>
</div>
<div class="erro_07"></div>
<div class="common_front shijuanxiti_2_case" id="shijuanxiti_2_case_3">
<div class="common_front shijuanxiti_2_d_t">翻译题</div>
<div class="common_front shijuanxiti_2_d_m" onclick="divAct(this,'up')">上移</div>
<div class="common_front shijuanxiti_2_d_m" onclick="divAct(this,'down')">下移</div>
<div class="common_front shijuanxiti_2_d_d" onclick="divAct(this,'delete')">删除</div>
<div class="debug_erro"></div>
</div>
<script language="javascript">
function divAct(newobj,acttype)
{
var p=newobj.parentNode;
var pp=newobj.parentNode.parentNode;
switch(acttype)
{
case "up":
if(p.id==pp.firstChild.id){window.alert("首位不能上移");}//end else
else{
pp.insertBefore(p,p.previousSibling);
}
break;
case "down":
if(p.id==pp.lastChild.id){window.alert("末位不能下移");}//end else
else{
pp.insertBefore(p.nextSibling,p);
}
break;
case "delete":
pp.removeChild(p);
break;
default:
window.alert("error");
}
}
</script>
</body>
</html>
分享到：
相关推荐
《jQuery实现鼠标拖动div排序技术详解》 在网页开发中，用户交互体验是至关重要的。其中，元素的可拖动排序功能可以让用户更加直观地调整界面布局，提高使用便捷性。本文将深入探讨如何利用jQuery库实现鼠标上下...
本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果，结合CSS样式，创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先，我们需要在HTML中设置好基础结构。创建一系列的div元素，每个div代表一个...
在JavaScript（JS）中，实现一个可拖拽排序的DIV元素功能是一项常见的需求，尤其是在构建交互性强的Web应用时。这个“js拖拽排序-可以拖拽的DIV.rar”文件很可能是包含了一个或多个示例代码，用于演示如何在HTML页面...
在提供的压缩包文件“拖动进行排序.html”中，包含了完整的HTML和JavaScript代码，你可以直接下载并运行查看效果。如果你对实现过程有任何疑问或需要进一步的帮助，欢迎探讨交流，共同学习进步。
**jQuery 实现的传统页面DIV排序删除** 在网页开发中，我们常常需要实现用户交互功能，如元素的拖拽排序和删除。在这个场景下，`jQuery` 提供了强大的DOM操作和事件处理能力，使得实现这样的功能变得相对简单。本...
本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先，你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库，而 jQuery UI 提供了包括Sortable在内的多种...
4. UI设计：在响应式布局中，`<div>`元素的位置调整和排序可以帮助优化不同屏幕尺寸下的界面展示。 总结，"DIV移动并排序JS效果"是网页动态化和交互性的重要体现，通过熟练掌握JavaScript对DOM的操作和事件处理，...
在Vue.js中实现页面div元素的拖拽排序功能可以极大地提升用户体验，特别是在构建可自定义布局的应用时。这里我们探讨的是一种基于CSS3 `transition-group` 的方法，它允许我们优雅地实现拖放动画和排序。 首先，让...
通过鼠标拖动来改变div的顺序，来实现指标的排序。使用了Jquery,jquery-ui.js,sortable,自己原创，效果很绚。 配合ThinkPHP可以实现把数据入库，由于使用的是ubuntu, 文件编码格式都是utf-8.
首先，`div`排序的基本原理是利用JavaScript监听用户的鼠标事件，如`mousedown`、`mousemove`和`mouseup`，这些事件分别对应着拖动操作的开始、过程中和结束。当用户点击并拖动一个`div`时，我们需要记录这个`div`的...
总的来说，通过jQuery的拖拽插件，我们可以轻松实现div元素的自由拖动排序，极大地提高了用户界面的交互性和用户体验。这种技术广泛应用于网页应用的构建，尤其是在需要用户自定义顺序或布局的场景下。
在网页设计和开发中，"DIV拖动排序"是一种...总的来说，"DIV拖动排序"是一个实用的前端技术，通过结合HTML、CSS和JavaScript可以创建出直观、可交互的用户界面。掌握这项技能将有助于提升Web应用的用户体验和易用性。
本资源涉及的是一个基于jQuery（JQ）、JavaScript（JS）和layui框架的UI组件，特别关注的是元素（尤其是div）的拖动功能。拖动插件是一种常见且实用的增强交互性的工具，它允许用户通过鼠标操作移动页面上的元素，...
然后，可以使用JavaScript的数组排序方法，如`sort()`，基于特定的比较函数来对这些元素进行排序。 比较函数通常接受两个参数，代表要比较的元素。例如，如果你想根据div的文本内容排序，你可以编写这样的比较函数...
"表格可按列筛选排序的分页 JS+CSS+DIV" 是一个基于 JavaScript、CSS 和 HTML（尤其是 DIV 元素）实现的功能强大的表格组件。这个组件允许用户对表格数据进行动态的列筛选和排序，同时具备分页功能，提高了用户体验...
《jQuery实现鼠标上下拖动div排序的技术解析》 在网页开发中，用户交互性是提升用户体验的关键因素之一。本文将详细解析"jQuery鼠标上下拖动div排序代码.zip"中的技术要点，帮助开发者理解和应用这一实用功能。 ...
8. **JavaScript封装与插件化**：为了方便复用和维护，这个插件很可能将所有功能封装成一个独立的模块或函数，用户只需调用特定方法并传入参数即可实现Div排序。 9. **示例代码**：`index.html`是插件的演示页面，...
<title>jQuery拖动Div排序 <script src="https://code.jquery.com/jquery-3.x.y.min.js"> <script src="https://code.jquery.com/ui/1.x.y/jquery-ui.min.js"> <!-- 在这里编写你的Div元素 --> <div id=...
研究3天，3分不贵吧，学js贵在会偷，哈哈哈
例如，可以获取排序后的div顺序，将它们的ID或自定义数据发送到服务器： ```javascript $("#myDivList").sortable({ ... update: function(event, ui) { var sortedIds = $(this).sortable('toArray'); $.ajax...