Jquery拖拽函数不工作
Jquery Draggable Function not working
我有一个JSP页面，我正在尝试并使其中一个表的行在我的页面可拖动，但它没有发生。在AJAX调用之后，表的行被附加到它。我已经尝试了各种组合和一切，但我不能得到我的任何元素是可拖动的。
这是我的页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec"
uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Categories</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href='<c:url value="/static/css/header.css" />'>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>
<script
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<style type="text/css">
table {
table-layout: fixed;
word-wrap: break-word;
}
th {
text-align:center;
}
#serviceSelect {
text-align: center;
}
#serviceSelect {
margin: auto;
width: 30%;
}
#removeSelect {
text-align: center;
}
#removeSelect {
margin: auto;
width: 30%;
}
#123 {
margin: auto;
width: 50%;
}
p {
font:bold;
}
</style>
</head>
<body>
<jsp:include page="../shared/header.jsp">
<jsp:param value="editActionButtons" name="currentPage" />
</jsp:include>
<div class="row">
<div class="text-center">
<h2>Select Service</h2>
<div class="text-muted">
<h4>Choose a Service To Edit Its Action Buttons</h4>
</div>
</div>
</div>
<div class="form-group" id="serviceSelect">
<select class="form-control" id="serviceMenu">
<option value="" disabled selected>Select Service</option>
<c:forEach items="${service}" var="seritem">
<option>${seritem}</option>
</c:forEach>
</select>
</div>
<br></br>
<form class="form-horizontal" role="form" action="updateActionButton" method=POST id="form2">
<div class="table-responsive12">
<table class="table table-bordered table-striped table-highlight" id="tab_logic">
</table>
<table class="table table-bordered table-striped table-highlight">
<tr id="submit">
<td colspan="3" align="center">
<div class="form-group">
<button type="submit" class="btn btn-success btn-md" id="submit">Submit</button>
</div>
</td>
</tr>
</table>
</div>
</form>
<br></br>
<form class='form-horizontal' role='form' action='removeActionButton' method=POST>
<div class="sel" id="123"></div>
</form>
<form class='form-horizontal' role='form' action='addActionButton' method=POST>
<div class="sel1" id="1234"></div>
</form>
<script type="text/javascript">
var t;
$(function() {
$("#serviceMenu").change(function() {
var service = $("#serviceMenu").val();
loadData(service);
loadTable(t);
loadActionData();
remove();
add();
$("#submit").draggable();
$("#tab_logic").draggable();
$("#tab_logic tr").draggable();
});
$("#submit").draggable();
$("#tab_logic").draggable();
$("#tab_logic tr").draggable();
});
function loadData(service) {
$.ajax({
type : "GET",
data : {
serv : service
},
dataType : 'json',
async : false ,
url : "printServiceDetails",
success : function(data) {
t=data;
},
error : function() {
alert("error");
}
});
}
function loadTable(num) {
$('#tab_logic').empty();
for (var i=1 ;i<=num;i++) {
$('#tab_logic').append("<tr><td colspan='3' align='center'><p id='addrp"+i+"'><strong>Action Button "+i+" Properties</strong></p></td></tr>");
$('#tab_logic').append("<tr><td align='center' style='width:15%'><p id='addac"+i+"'><strong>Action</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpac"+i+"'>Action</p></td><td><input type ='text' class ='form-control' id='addiac"+i+"' name ='addiac"+i+"' placeholder='Enter Action'</td> </tr>");
$('#tab_logic').append("<tr><td align='center' style='width:15%'><p id='addat"+i+"'><strong>Action Text</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpat"+i+"'>Action Text</p></td><td><input type ='text' class ='form-control' id='addiat"+i+"' name ='addiat"+i+"' placeholder='Enter Action Text'</td> </tr>");
$('#tab_logic').append("<tr><td align='center' style='width:15%'><p id='addcc"+i+"'><strong>Color Code</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpcc"+i+"'>Color Code</p></td><td><input type ='text' class ='form-control' id='addicc"+i+"' name ='addicc"+i+"' placeholder='Enter Color Code'</td> </tr>");
}
}
function loadActionData() {
$.ajax({
type : "GET",
dataType : 'json',
async : false ,
url : "loadButtonDetails",
success : function(data) {
for(var i=1;i<=data.length;i++)
{
$("#addpac"+i.toString()).html("<strong>"+data[i-1].ac+"</strong>");
$("#addpcc"+i.toString()).html("<strong>"+data[i-1].cc+"</strong>");
$("#addpat"+i.toString()).html("<strong>"+data[i-1].at+"</strong>");
$("#addiac"+i.toString()).val(data[i-1].ac);
$("#addicc"+i.toString()).val(data[i-1].cc);
$("#addiat"+i.toString()).val(data[i-1].at);
}
},
error : function() {
alert("error");
}
});
}
function remove(){
var htm="";
$("#123").html(htm);
htm+="<div class='text-center'><h4><strong>ADD/DELETE ACTION BUTTONS</strong></h4></div>";
htm+="<select class='form-control id='removeSelect' name='removeSelect' style='width:30%;text-align:center;margin:auto'>";
for(var i=1;i<=t;i++)
{
htm+="<option>"+i+"</option>";
}
htm+="</select>";
htm+="<div style='text-align:center'><button type='submit' class='btn btn-success btn-md' id='removeSubmit'>Remove</button> </div>";
$("#123").append(htm);
}
function add(){
var htm="";
$("#1234").html(htm);
htm+="<div class='text-center'><h4>Enter The Details To Add A Button</h4></div>";
htm+="<table class='table table-bordered table-striped table-highlight'><tr> <th>Action</th><th>Action Text</th><th>Color Code</th></tr>";
htm+="<tr><td><input type='text' class='form-control' id='ac' name='ac' placeholder='Enter Action'></td><td><input type='text' class='form-control' id='at' name='at' placeholder='Enter Action text'></td><td><input type='text' class='form-control' id='cc' name='cc' placeholder='Enter Color Code'></td></tr>";
htm+="</table>";
htm+="<div style='text-align:center'><button type='submit' class='btn btn-success btn-md' id='addSubmit'>Add</button> </div>";
$("#1234").append(htm);
}
</script>
</body>
</html>你必须告诉jQuery-UI哪些DOM元素是可拖动的。你需要调用一个方法。查看这里的文档:
https://api.jqueryui.com/draggable/option-addClasses
$('.yourRows').draggable()
只需用jQuery选择节点并调用draggable方法。确保在AJAX调用之后添加DOM节点之后执行此操作。
相关文章：
- 咖啡的Javascript订单总数无法使函数正常工作.请协助
- removeClass函数没有'工作不正常
- 你能解释一下这个阶乘函数是如何工作的吗?
- JavaScript链接在点击时不起作用;函数在页面加载时工作
- jQuery加载的async和ready函数不工作
- 更改智能表中的页面将停止JQuery函数的工作
- 为什么不是'我的函数在解析云代码中工作吗?当我在Angular和Express中测试时，它是有效的
- jQuery函数不能只在一个页面上工作
- 如何检查这个代码点火器php函数是否工作，该函数是否在ajax url中使用
- 从js引擎的角度来看闭包和构造函数是如何工作的
- appendChild在函数外部工作，但在函数内部不工作
- 如何在php中创建一个函数，该函数与文本区域一起工作，通过输入类似[color:red]的内容来打印具有等效颜色的文本
- 由于某种原因，我的JavaScript函数无法工作
- 为什么递归生成器函数没有't在ES2015工作
- 我需要一个jQuery函数来只工作在700px以上的屏幕大小，无法在我的代码中发现错误
- 从控制台中的工作函数转换为工作脚本.(请参阅编辑）
- Angular JS-工作函数中的“错误:[$interpole:interr]Can't interpole:
- 简化工作函数以替换特定单词
- 为什么不在回调中工作函数?
- InnerHTML不工作:函数未定义
