jquery는 요소의 드래그 정렬을 구현합니다(코드 첨부).
- php中世界最好的语言원래의
- 2018-04-26 09:28:222307검색
이번에는 요소 드래그 정렬(코드 포함)을 구현하기 위한 jquery를 가져왔습니다. jquery에서 요소 드래그 정렬을 구현하는 데 있어 주의사항은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.
<!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=UTF-8" />
<title>jquery学习-jquery对元素拖动排序</title>
<style type="text/css">
#show
{
color: Red;
}
#list
{
cursor: move;
width: 300px;
}
#list li
{
border: solid 1px yellow;
float: left;
list-style-type
: none;
margin-top: 10px;아래에서는 이 기능을 단계별로 구현해보겠습니다.
<span>
<p>
<input>
</p>
<p>
<input>
</p>
<ul>
<repeater>
<itemtemplate>
<li>" title="">
<img src="/static/imghwm/default1.png" data-src="<%#Eval(" class="lazy" alt="jquery는 요소의 드래그 정렬을 구현합니다(코드 첨부)." >" />
</li>
</itemtemplate>
</repeater>
</ul>
</span>
라디오 버튼이 있습니다. 사용자가 이를 선택하면 이미지를 드래그할 때 데이터베이스의 데이터 정렬이 변경됩니다. 숨겨진 필드에는 그림의 원래 순서가 저장됩니다. ul은 사진 목록을 표시합니다.
보기 쉽게 하기 위해 약간의 스타일을 추가했습니다.
var show = jQuery("#show"); //输出提示
var orderlist = jQuery("#orderlist"); //原顺序
var check = jQuery("#check"); //是否更新到数据库
나중에 더 간결하게 호출할 수 있도록 자주 사용하는 선택자를 먼저 저장하세요. 모두가 이것에 아무런 문제가 없을 것입니다. ^_^
//保存原来的排列顺序
var order = [];
list.children("li").each(function() {
order.push(this.title); //原排列顺序保存在title，得到后更改title
jQuery(this).attr("title", "你可以拖动进行排序");
});
orderlist.val(order.join(','));
원래 정렬 순서를 숨겨진 필드에 저장하세요. 여기서는 배열의 push() 메소드를 사용하는데, 이는 배열에 ul의 각 li에 제목(원본 배열 순서)을 추가하는 것입니다. 마지막으로 Join() 메서드를 사용하여 원래 정렬 순서를 가져오고 문자열을 반환합니다. 이제 정렬 순서 형식은 1,2,3입니다.
//ajax更新
var Update = function(itemid, itemorder) {
jQuery.ajax({
type: "post",
url: "update.aspx",
//id:新的排列对应的ID,order：原排列顺序
data: { id: itemid, order: orderlist.val() },
beforeSend: function() {
show.html("正在更新");
},
success: function() {
show.html("更新成功");
}
});
};
다음으로 ajax 업데이트 블록을 분리합니다. 이렇게 하면 프로그램이 더 깨끗해지고 이 영역에는 새로운 것이 없습니다.
//调用ajax更新方法
var Submit = function(update) {
var order = [];
list.children("li").each(function() {
order.push(this.id);
});
var itemid = order.join(',');
//如果单选框选中，则更新表中排列顺序
if (update) {
Update(itemid);
}
else {
show.html("");
}
};
정렬 순서를 가져오는 것과 유사하게 ID는 문자열로 구성되어 Update() 메서드에 전달됩니다. 함수의 매개변수 업데이트는 확인란 선택 여부입니다.
//执行排列操作
list.sortable({
opacity: 0.7,
update: function() {
Submit(check.attr("checked"));
}
});
}
<script></script>
<script></script>
<script>
$(document).ready(function () {
//保存常用选择器
var list = $("#list"); //ul
var show = $("#show"); //输出提示
var orderlist = $("#orderlist"); //原顺序
var check = $("#check"); //是否更新到数据库
//保存原来的排列顺序
var order = [];
list.children("li").each(function () {
order.push(this.title); //原排列顺序保存在title，得到后更改title
$(this).attr("title", "你可以拖动进行排序");
});
orderlist.val(order.join());
//执行排列操作
list.sortable({
axis: 'y',//只能横向拖动
opacity: 0.7,// 移动时的透明度
update: function () {//当排序动作结束时且元素坐标已经发生改变时触发此事件。
Submit(check.attr("checked"));
}
});
//ajax更新
var Update = function (itemid, itemorder) {
$.ajax({
type: "post",
url: "update.aspx",
data: { id: itemid, order: orderlist.val() }, //id:新的排列对应的ID,order：原排列顺序
beforeSend: function () {
show.html("正在更新");
},
success: function (req) {
if (req == "100") {
show.html("更新成功");
}
else if (req == "001") {
show.html("失败，请稍后再试");
}
else {
show.html("参数不全");
}
}
});
};
//调用ajax更新方法
var Submit = function (update) {
var order = [];
list.children("li").each(function () {
order.push(this.id);
});
var itemid = order.join(',');
//如果单选框选中，则更新表中排列顺序
if (update) {
Update(itemid);
}
else {
show.html("");
}
};
});
</script>
위 내용은 jquery는 요소의 드래그 정렬을 구현합니다(코드 첨부).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!