[英]Multiple draggable droppable and sortable jQuery
我查了一下:
Jquery draggable / droppable和sortable组合
JQuery Draggable + Droppable + Sortable
所以,答案都不是这些。
理论
问题
你有什么尝试?
$(function() {
$( ".fetchedfromdb li" ).draggable({
appendTo: "body",
helper: "clone",
drag: function(){
$(".sortintodb ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function(event, ui) {
$( this ).find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
}
}).sortable({
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
}
});
});
我的COdeIgniter部分:
<?php
echo form_open('/data/process');
echo form_label('yep') . form_textarea('remarks');
foreach($dataFetched as $data => $field) {
echo "<h2>$data</h2> \n <ul class='fetchedfromdb'>";
foreach($field as $f):
$fieldFetch = $data.'_1_1';
echo '<li>'.$f->$fieldFetch.'</li>';
echo "<br />";
endforeach;
echo '</ul>';
echo '<div style="background-color: #c3c3c3; height:100px">';
echo "<ol class=\"sortintodb\" id=\"$data\">";
echo '<li class="placeholder">Drop here</li>
</ol>
</div><hr />';
}
echo form_submit('submit','Submit');
echo form_close();
?>
通过CSS我已经确保每个输出直到父foreach结束在同一部分
有关如何实施的任何想法?
任何帮助,非常感谢。 谢谢 :)
'视觉'代表我们正在看的东西......
这是工作演示。 Jsfiddle演示
HTML
<ul class='fetchedfromdb' id="da1"> //parent element
<li id="1">Data1</li>
<br />
<li id="2">Data2</li>
<br />
<li id="3">Data3</li>
<br />
<div style="background-color: #c3c3c3; height:100px">
<ol class="sortintodb" id="e201">
<li class="placeholder" id="9">Drop here</li>
</ol>
</div>
</ul>//ends
<hr />
<h2>e202</h2>
<ul class='fetchedfromdb'>
<li id="5">Data1</li>
<br />
<li id="6">Data2</li>
<br />
<li id="7">Data4</li>
<br />
<div style="background-color: #c3c3c3; height:100px">
<ol class="sortintodb" id="e202">
<li class="placeholder" id="8">Drop here</li>
</ol>
</div>
</ul>
<hr />
脚本
$(".fetchedfromdb li").draggable({
containment: 'parent',
helper: "clone",
connectToSortable: '.sortable',
});
$(".sortintodb").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function(event, ui) {
var self = $(this);
//if you don't want same "data" in placeholder more than once
self.find(".sortintodb").remove();
var dropId = ui.draggable.attr('id');
if (self.find("[id=" + dropId + "]").length) return;
$("<li></li>", {
"text": ui.draggable.text(),
"id": dropId
}).appendTo(this);
},
});
$('.sortintodb').sortable({
placeholder: "ui-state-highlight",
});
请检查这个更新的小提琴,让我知道是否需要任何额外的行为
$(function() {
$('.sortable').sortable().disableSelection();
$( ".draggable li" ).draggable({
revert: true
});
$('.droppable').droppable({
drop: function(e, ui) {
var el = $('<li></li>').text($(ui.draggable).text()).appendTo($(this));
if($(ui.draggable).parent().find('li').size() == 1)
$(ui.draggable).parent().addClass('empty');
else
$(ui.draggable).parent().removeClass('empty');
$(ui.draggable).remove();
if($(this).find('li').size() == 1)
$(this).addClass('empty');
else
$(this).removeClass('empty');
if($(this).is('.sortable')) {
$(this).sortable( "refresh" );
$(this).sortable( "refreshPositions" );
} else {
$(el).draggable({
revert: true
});
}
},
accept: function(draggable) {
return $(draggable).parent().data('section') == $(this).data('section') && !$(draggable).parent().is($(this));
}
});
});
所以我猜你想要一些代码来更新你订购/删除的数据库?
在你的jquery .drop和.sort函数中有一些代码运行一个jquery ajax来将数据发布到控制器。 然后,控制器可以让您的模型重新排序数据,以模仿屏幕上显示的内容。
下面是我用来做这个例子的代码。 因此,一般而言,它会获取一些数据,将其发送到服务器,并整理本地屏幕副本。 我的ajax_post方法非常复杂,但它的功能是将数据发送到服务器,并处理回复。
drop: function( event, ui ) {
var row = ui.draggable.context.id;
var data = {id:row.substr(row.lastIndexOf('_')+1),mr_id:o.mr_id,type:o.type}
ajax_post('patients/row_remove',data);
$('#'+row).remove();
setup_row_banding(o.container + ' .med_row');
} // end drop
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.