[英]Multiple draggable droppable and sortable jQuery
I checked these: 我查了一下:
Jquery draggable/droppable and sortable combined Jquery draggable / droppable和sortable组合
jQuery UI: sortable and draggable + sortable and droppable jQuery UI:可排序和可拖动+可排序和可放置
JQuery Draggable + Droppable + Sortable JQuery Draggable + Droppable + Sortable
So, answers are none of these. 所以,答案都不是这些。
Theory 理论
Problem 问题
What have you tried ? 你有什么尝试?
$(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" );
}
});
}
});
});
My COdeIgniter part: 我的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();
?>
via CSS I have made sure that every output till parent foreach ends comes under same section 通过CSS我已经确保每个输出直到父foreach结束在同一部分
Any ideas about how can this be implemented? 有关如何实施的任何想法?
Any help, much appreciated. 任何帮助,非常感谢。 Thank you :)
谢谢 :)
'Visual' representation of what we are looking at... '视觉'代表我们正在看的东西......
Here is Working demo. 这是工作演示。 Jsfiddle Demo
Jsfiddle演示
HTML 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 />
Script 脚本
$(".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",
});
Please check this updated fiddle and let me know if any extra behavior required 请检查这个更新的小提琴,让我知道是否需要任何额外的行为
http://jsfiddle.net/a8BAY/2/ http://jsfiddle.net/a8BAY/2/
$(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));
}
});
});
so i am guessing you want to have some code that updates the database on what you have ordered/dropped? 所以我猜你想要一些代码来更新你订购/删除的数据库?
in your jquery .drop & .sort functions have some code that runs a jquery ajax to post the data to the controller. 在你的jquery .drop和.sort函数中有一些代码运行一个jquery ajax来将数据发布到控制器。 the controller can then get your model to re-order the data to mimic what is shown on the screen.
然后,控制器可以让您的模型重新排序数据,以模仿屏幕上显示的内容。
below is code i used to do this as an example. 下面是我用来做这个例子的代码。 so in general terms it gets some data, sends it to the server, and tidies up the local screen copy.
因此,一般而言,它会获取一些数据,将其发送到服务器,并整理本地屏幕副本。 my ajax_post method is pretty complicated, but its function is to send data to the server, and process the replies.
我的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.