我查了一下:
Jquery draggable/droppable and sortable combined
jQuery UI: sortable and draggable + sortable and droppable
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结束都在同一部分
有关如何实施的任何想法?
任何帮助,非常感谢。谢谢:))
'视觉'表示我们正在看的......
答案 0 :(得分:4)
这是工作演示。 Jsfiddle Demo
<强> 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",
});
答案 1 :(得分:3)
请检查这个更新的小提琴,如果需要任何额外的行为,请告诉我
$(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));
}
});
});
答案 2 :(得分:0)
所以我猜你想要一些代码来更新你订购/放弃的数据库?
在你的jquery .drop&amp; .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