Jquery Draggable函数不起作用

时间：2016-06-26 07:09:19

标签： javascript jquery ajax jquery-ui

我有一个JSP页面，我正在尝试并使我的页面中的一个表的行可拖动，但它没有发生。在AJAX调用之后，表的行将附加到它。我尝试了各种组合和一切，但我不能让任何我的元素可以拖拽。

这是我的页面

＆＃13;
＆＃13; 
<%@ 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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

你必须告诉jQuery-UI哪些DOM元素是可拖动的。有一种方法你必须要求它。查看文档：

https://api.jqueryui.com/draggable/#option-addClasses 

$('.yourRows').draggable()

只需使用jQuery选择节点并调用draggable方法。确保在AJAX调用后附加DOM节点后执行此操作。

相关问题
最新问题