jqueryui.comが提供するPhotoManagerの例を使用して、jQuery UI Drop/Drapをいじっています。私が達成しようとしているのは、写真マネージャーとして、SQLデータベースから自動生成されたデータを使用することです。ドラッグ可能なデータをデータベースからのデータで埋めることができました。例のように画像をドロップ可能なデータにドロップできるので、そのデータをデータベース（別のテーブル）に保存して、次回ユーザーが再ログまたは更新するときに使用します。ドロップ可能なページにドロップされた画像を見ることができるページです。これまでのところ良好です。問題は、ドロップ可能に対して生成されたデータがドラッグ可能ではなく、ドラッグ可能からドロップされた画像のみであるということです。<div><div><div><div><div>ページを再表示せずに、ドラッグ可能およびドロップ可能にドラッグ可能に戻すことができます<div>。
jqueryuiコード
$(function() {
var $available_for_share = $( "#available-for-share" ),
$currently_sharing = $( "#currently-sharing" );
// let the available_for_share items be draggable
$( "li", $available_for_share ).draggable({
cancel: "a.ui-icon", // clicking an icon wont initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: $( "#sharing" ).length ? "#sharing" : "document", // stick to demo-frame if present
helper: "clone",
cursor: "move"
});
// let the available_for_share be droppable as well, accepting items from the currently-sharing
$available_for_share.droppable({
accept: "#currently-sharing li",
activeClass: "custom-state-active",
drop: function( event, ui ) {
currently_sharing( ui.draggable );
}
});
// let the currently-sharing be droppable, accepting the available_for_share items
$currently_sharing.droppable({
accept: "#available-for-share > li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
available_for_share( ui.draggable );
}
});
function available_for_share( $item ) {
var arr = {};
arr['list_id'] = list_id();
arr['share_with'] = $item.attr('id');
$.post('<?= site_url() ?>/lists/js_share_with', arr,function(str){
str = $.parseJSON(str);
if(str['status'] == 0){
info_bar(str['status'],str['msg']);
} else {
info_bar(str['status'],str['msg']);
$item.fadeOut(function() {
var $list = $( "ul", $currently_sharing ).length ?
$( "ul", $currently_sharing ) :
$( "<ul class='available-for-share ui-helper-reset'/>" ).appendTo( $currently_sharing );
$item.find( "a.ui-icon-trash" ).remove();
$item.appendTo( $list ).fadeIn();
});
}
})
}
function currently_sharing( $item ) {
var arr = {};
arr['list_id'] = list_id();
arr['stop_sharing'] = $item.attr('id');
$.post('<?= site_url() ?>/lists/js_stop_sharing', arr,function(str){
str = $.parseJSON(str);
if(str['status'] == 0){
info_bar(str['status'],str['msg']);
} else {
$item.fadeOut(function() {
$item
.appendTo( $available_for_share )
.fadeIn();
});
info_bar(str['status'],str['msg']);
}
})
}
HTML
<div id="sharing" class="col3 center">
<h2>Share this list</h2>
<span style="font-size:0.8em;">Drag and drop at the bottom box the images you want to share.</span>
<br />
<? if (is_array($available)) : ?>
<div class="ui-widget ui-helper-clearfix">
<hr>
<span style="font-size:0.8em;">available for sharing</span><br />
<ul id="available-for-share" class="available-for-share ui-helper-reset ui-helper-clearfix ui-state-default">
<? foreach ($available as $k) : ?>
<li id="<?= $k['imageID'] ?>" class="ui-widget-content ui-corner-tr">
<img src="http://somedomain/images/<?= $k['imageID'] ?>_64.jpg" alt="<?= $k['imageName'] ?>" width="52" height="52" />
</li>
<? endforeach ?>
</ul>
<span style="font-size:0.8em;">shared with</span><br />
<div id="currently-sharing" class="ui-widget-content ui-state-default ui-droppable">
<? if (is_array($currently_sharing_with)) : ?>
<ul class="available-for-share ui-helper-reset">
<? foreach ($currently_sharing_with as $k) : ?>
<li id="<?= $k['imageID'] ?>" class="ui-widget-content ui-corner-tr ui-draggable" style="display: list-item;">
<img src="http://somedomain/images/<?= $k['imageID'] ?>_64.jpg" alt="<?= $k['imageName'] ?>" width="52" height="52" />
</li>
<? endforeach ?>
</ul>
<? endif ?>
</div>
</div>
<? else : ?>
<p>No images</p>
<? endif ?>
</div>
jqueryコードはa内に<script>あり、データベースデータが取得された直後に実行されます。