62,041
社区成员
发帖
与我相关
我的任务
分享实现了拖动效果。在前台拖动结束时，怎么将原位置和新位置发到后台
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
function last() {
var x =$("#draggable").each(function () {
//var tmp;
$(this).find('li').each(function () {
//tmp = $(this).text();
key.push($(this).text());
});
});
//遍历该数组可以获取所有值
}
$(function () {
$("#sortable").sortable({
revert: true
});
$("#draggable").draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$("ul, li").disableSelection();
var a = new Object();
var b = new Object();
$.ajax({
type: "POST",//请求方式
url: "WebForm1.aspx/getjson",//地址，就是json文件的请求路径
contentType: "application/json; charset=utf-8",
dataType: "json",//数据类型可以为 text xml json script jsonp
success: function (data) {//返回的参数就是 action里面所有的有get和set方法的参数
var Num = data.d;
a = Num[0];
b = Num[1];
var list = "";
for (var i = 0; i < Num.length; i++) {
list += "<li class='ui-state-default'>" + Num[i] + "</li>";
}
document.getElementById('sortable').innerHTML = list;
}
});
$("#sortable li").click(function () {//点击事件
var Uarry = $("#sortable li");//获取所有的li元素
//测试直接获取值 var v=$(this).text(); alert(v);
var count = $(this).index();//获取li的下标
var Tresult = Uarry.eq(count).text();
$("#tresult").val(Tresult);
})
})
/*$.get("item.json",function(result){
//result数据添加到box容器中;
addBox(result);
});*/
</script>
</head>
<body>
<ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<ul id="sortable">
</ul>
<span>您所选取的值为：</span><span><input type="text" id="tresult" /></span>
</body>
</html>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
function last() {
var x =$("#draggable").each(function () {
//var tmp;
$(this).find('li').each(function () {
//tmp = $(this).text();
key.push($(this).text());
});
});
//遍历该数组可以获取所有值
}
$(function () {
$("#sortable").sortable({
revert: true
});
$("#draggable").draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$("ul, li").disableSelection();
var a = new Object();
var b = new Object();
$.ajax({
type: "POST",//请求方式
url: "WebForm1.aspx/getjson",//地址，就是json文件的请求路径
contentType: "application/json; charset=utf-8",
dataType: "json",//数据类型可以为 text xml json script jsonp
success: function (data) {//返回的参数就是 action里面所有的有get和set方法的参数
var Num = data.d;
a = Num[0];
b = Num[1];
var list = "";
for (var i = 0; i < Num.length; i++) {
list += "<li class='ui-state-default'>" + Num[i] + "</li>";
}
document.getElementById('sortable').innerHTML = list;
}
});
$("#sortable li").click(function () {//点击事件
var Uarry = $("#sortable li");//获取所有的li元素
//测试直接获取值 var v=$(this).text(); alert(v);
var count = $(this).index();//获取li的下标
var Tresult = Uarry.eq(count).text();
$("#tresult").val(Tresult);
})
})
/*$.get("item.json",function(result){
//result数据添加到box容器中;
addBox(result);
});*/
</script>
</head>
<body>
<ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<ul id="sortable">
</ul>
<span>您所选取的值为：</span><span><input type="text" id="tresult" /></span>
</body>
</html>
...全文
请发表友善的回复…
发表回复
小游的博客 2018-06-21
- 打赏
- 举报
求助
小游的博客 2018-06-21
- 打赏
- 举报
难点在不知道怎么记录坐标，，拖动前的坐标倒是有 本来就是后台传过来的， 拖动后就不知道怎么获取了
Jason_Mao1 2018-06-20
- 打赏
- 举报
用jquery 来做呗，拖动前记录一个location 拖动后记录一个location 然后发送一对坐标给后台就ok了，不知道你的难点在哪里 ？
小游的博客 2018-06-20
- 打赏
- 举报
有木有大佬帮忙看看呐
小游的博客 2018-06-20
- 打赏
- 举报
$("#sortable li").click(function () {//点击事件
var Uarry = $("#sortable li");//获取所有的li元素
//测试直接获取值 var v=$(this).text(); alert(v);
var count = $(this).index();//获取li的下标
var Tresult = Uarry.eq(count).text();
$("#tresult").val(Tresult);
这段代码获取不到UL中的值QAQ
