[英]use sortable script when items printed with ajax
I'm using jquery sortable for my drag&drop
section. 我正在为我的drag&drop
部分使用可排序的jQuery。
I have button that print results with items on the screen. 我有一个按钮,可以在屏幕上显示带有项目的结果。 Those items can be drag&drop
into many sections. 这些项目可以drag&drop
到许多部分中。
If i write the sortable script in my main index.php
file than the script doesn't works. 如果我在主index.php
文件中编写了可排序脚本,则该脚本不起作用。 In order it to work I need to write the script in in my ajax file. 为了使其正常工作,我需要在ajax文件中编写脚本。 But than, every time i print more results (items) i also print the script again and again. 但是比起每次我打印更多结果(项目)时,我也会一次又一次地打印脚本。
How can i fix it? 我该如何解决?
Jquery - drag & drop jQuery-拖放
<script>
// sortable SCRIPT
$(document).ready(function() {
$( ".dropZone" ).sortable({
revert: true,
update: function(event, ui) {
var secID = event.target.id;
var attacID = ui.item.data('id');
var data = $(this).sortable('serialize', {
attribute: "data-id"
});
data = data + '&secID=' + secID;
}
});
$( ".attrac" ).draggable({
connectToSortable: ".dropZone",
helper: "clone",
revert: "invalid"
});
} );
</script>
HTML 的HTML
<div id="moreRes-box" class="text-center col-md-12 mt20">
<button type="submit" class="moreRes-btn" data-startRow="0" data-style="panel">SUBMIT</button>
</div>
<div id="search-res-box">
</div>
AJAX - print items AJAX-打印项目
$(document).on("click", ".moreRes-btn", function(e){
$.ajax ({
type: 'POST',
url: 'ajax/attractions-control.php',
data: formData,
async: false,
success: function (data)
{
$("#search-res-box").append(data);
}
});
});
Make a funcion called for example updateDrag
and call it both on document ready, both after the ajax call. 创建一个名为updateDrag
并在ajax调用之后都在文档就绪时调用它们。 For example, like the code below: 例如,如下代码:
function updateDrag(){
$( ".attrac" ).draggable({
connectToSortable: ".dropZone",
helper: "clone",
revert: "invalid"
});
}
$(document).ready(function() {
$( ".dropZone" ).sortable({
revert: true,
update: function(event, ui) {
var secID = event.target.id;
var attacID = ui.item.data('id');
var data = $(this).sortable('serialize', {
attribute: "data-id"
});
data = data + '&secID=' + secID;
}
});
updateDrag();
} );
$(document).on("click", ".moreRes-btn", function(e){
$.ajax ({
type: 'POST',
url: 'ajax/attractions-control.php',
data: formData,
async: false,
success: function (data)
{
$("#search-res-box").append(data);
updateDrag();
}
});
});
The important part of the code is the call of updateDrag()
on success : 该代码的重要部分是成功调用updateDrag()
:
$.ajax ({
type: 'POST',
url: 'ajax/attractions-control.php',
data: formData,
async: false,
success: function (data) {
$("#search-res-box").append(data);
updateDrag();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.