<!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>
分享到：
相关推荐
js拖拽排序-可以拖拽的DIV
jquery div拖动排序效果代码是一款打开从左到右慢慢展开，可自由拖动排序特效.
vue实现页面div盒子拖拽排序功能 vue 实现页面div盒子拖拽排序功能前言：目前市面上有很多实现拖拽排序功能的插件和方法，本节不过多累述，只讲一种：css3的transition-group方法 效果图： 1. DOM中使用： ...
通过鼠标拖动来改变div的顺序，来实现指标的排序。使用了Jquery,jquery-ui.js,sortable,自己原创，效果很绚。 配合ThinkPHP可以实现把数据入库，由于使用的是ubuntu, 文件编码格式都是utf-8.
1、html 拖动div进行相应顺序的排序，亲测可用，简单方便 2、适用于各大场景，通过相应的js拖动来执行相应的方法 3、可以下载应用，不懂的可以一起探讨
JQ JS javascript layui UI组件 元素 div 拖动插件JQ JS javascript layui UI组件 元素 div 拖动插件
DIV移动并排序JS效果，很不错支持横移，竖移动
研究3天，3分不贵吧，学js贵在会偷，哈哈哈
jQuery鼠标上下拖动div排序代码、鼠标拖动层改变排列顺序，div左上角还有按钮操作，点击只是弹窗提示效果。
jquery.dad.js div拖拽排序,及bug优化.
div拖动排序插件jquery.sortable是一款使用jquery的Sortable函数实现的div的拖动排序效果，可实现与后台的交互。
div+css+js制成的表单，点击列名，可以使数据根据点击的列进行升序、降序的排序，还可以选择当前页显示的数据数量。适合网站后台使用
php+mysql+js拖拽div实例 代码已改好，放在目录下可直接使用。适合新手学习！
这个效果演示了每个冒泡过程，对应DIV的展现，依次着色的效果，到最后把对应所有数据的表格都着色，也就是显示了排序的结果。可以说本特效很好的演示了冒泡法排序的实现过程。 在编写html时，采用了绑定内联样式，...
jQuery实现DIV元素拖动排序代码基于HTML5 section和jquery.sortable.js制作，可以实现鼠标拖动网页元素进行排序效果。
仿360首页导航Div排序插件
网站个性化 div可以随意拖动 cookie保存！
一个兼容性非常好的Js网页DIV模块拖动代码，就JavaScript结合PHP实现的网页DIV模块拖动特效，以ajax方式拖动，先前可见于博客的管理后台，用于管理自己网站的模块排序。本拖动特效结合PHP程序，实现了拖动模块位置的...
JS+CSS制作的DIV层最小化和随意拖拽排序功能</TITLE> <style type=”text/css”> body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#...
jquery编写HTML 鼠标可拖动层DIv 整理源代码。比网络上的其他鼠标拖动效果比较小巧，结构清楚，没有那么多花里胡哨的垃圾代码。