JavaScript + Ajax 実践サンプル集

Droppable Photo Manager

説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのdraggable, droppable, resizable, dialogプラグインを使用してシンプルなフォトマネージャを実装しています。イメージのズームアイコンをクリックするとモダル型ダイアログを表示して拡大表示します。ダイアログはドラッグして移動したり、リサイズすることができます。ゴミ箱のアイコンをクリックすると右側の「ゴミ箱」に入れます。イメージをドラッグ＆ドロップしてゴミ箱に入れることもできます。ゴミ箱からリサイクルのアイコンをクリックすると元に復元されます。ゴミ箱からドラッグ＆ドロップして取り出すこともできます。

このサンプルを編集して試してみる

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery Plugin UI - droppable simple photo manager</title>
  <link href="jQuery/UI/ui.all.css" rel="stylesheet" type="text/css" />

<div class="demo ui-widget ui-helper-clearfix">
    <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
      <li class="ui-widget-content ui-corner-tr">
        <h5 class="ui-widget-header">Sea 1</h5>
        <img src="jQuery/simplePhoto/images/sea_min.jpg" alt="Sea #1" width="96" height="72" />
        <a href="jQuery/simplePhoto/images/sea.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> 
        <a href="#nogo" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> 
      </li>
      <li class="ui-widget-content ui-corner-tr">
        <h5 class="ui-widget-header">Sea 2</h5>
        <img src="jQuery/simplePhoto/images/sea2_min.jpg" alt="Sea #2" width="96" height="72" />
        <a href="jQuery/simplePhoto/images/sea2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> 
        <a href="#nogo" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> 
      </li>
      <li class="ui-widget-content ui-corner-tr">
        <h5 class="ui-widget-header">Tree 1</h5>
        <img src="jQuery/simplePhoto/images/tree_min.jpg" alt="Tree #1" width="96" height="72" />
        <a href="jQuery/simplePhoto/images/tree.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> 
        <a href="#nogo" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> 
      </li>
      <li class="ui-widget-content ui-corner-tr">
        <h5 class="ui-widget-header">Tree 2</h5>
        <img src="jQuery/simplePhoto/images/tree2_min.jpg" alt="Tree #2" width="96" height="72" />
        <a href="jQuery/simplePhoto/images/tree2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> 
        <a href="#nogo" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> 
      </li>      
    </ul>
    <div id="trash" class="ui-widget-content ui-state-default">
      <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
    </div>
  </div>
  
</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
$(function() {
  var $gallery = $('#gallery'), $trash = $('#trash');

  $('li', $gallery).draggable({
    cancel: 'a.ui-icon',  // clicking an icon won't initiate dragging
    revert: 'invalid',    // when not dropped, the item will revert back to its initial position
    containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
    helper: 'clone',
    cursor: 'move'
  });

  $trash.droppable({
    accept: '#gallery > li',
    activeClass: 'ui-state-highlight',
    drop: function(ev, ui) {
      deleteImage(ui.draggable);
    }
  });

  $gallery.droppable({
    accept: '#trash li',
    activeClass: 'custom-state-active',
    drop: function(ev, ui) {
      recycleImage(ui.draggable);
    }
  });

  // image deletion function
  var recycle_icon = '<a href="#nogo" title="Recycle this image" class="ui-icon ui-icon-refresh">Recycle image</a>';

  function deleteImage($item) {
    $item.fadeOut(function() {
      var $list = $('ul', $trash).length ? $('ul', $trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);

      $item.find('a.ui-icon-trash').remove();
      $item.append(recycle_icon).appendTo($list).fadeIn(function() {
        $item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
      });
    });
  }

  // image recycle function
  var trash_icon = '<a href="#nogo" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>';

  function recycleImage($item) {
    $item.fadeOut(function() {
      $item.find('a.ui-icon-refresh').remove();
      $item.css('width', '96px').append(trash_icon).find('img').css('height', '72px').end().appendTo($gallery).fadeIn();
    });
  }

  // image preview function, demonstrating the ui.dialog used as a modal window
  function viewLargerImage($link) {
    var src = $link.attr('href');
    var title = $link.siblings('img').attr('alt');
    var $modal = $('img[src$="' + src + '"]');

    $modal.length ? $modal.dialog('open') : $('<img alt="' + title + '" width="384" height="288" style="padding: 8px;" />').attr('src', src).appendTo('body').dialog({
      title: title,
      width: '400px', 
      modal: 'true',
      overlay: {
        backgroundColor: '#000',
        opacity: 0.5
      }
    });
  }

  // resolve the icons behavior with event delegation
  $('ul.gallery > li').click(function(ev) {
    var $item = $(this);
    var $target = $(ev.target);

    if ($target.is('a.ui-icon-trash')) {
      deleteImage($item);
    } else if ($target.is('a.ui-icon-zoomin')) {
      viewLargerImage($target);
    } else if ($target.is('a.ui-icon-refresh')) {
      recycleImage($item);
    }

    return false;
  });
});

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
#gallery
{
  float: left;
  width: 65%;
  min-height: 12em;
}
* html #gallery
{
  height: 12em;
}
/* IE6 */
.gallery.custom-state-active
{
  background: #eee;
}
.gallery li
{
  float: left;
  width: 96px;
  padding: 0.4em;
  margin: 0 0.4em 0.4em 0;
  text-align: center;
}
.gallery li h5
{
  margin: 0 0 0.4em;
  cursor: move;
}
.gallery li a
{
  float: right;
}
.gallery li a.ui-icon-zoomin
{
  float: left;
}
.gallery li img
{
  width: 100%;
  cursor: move;
}
#trash
{
  float: right;
  width: 32%;
  min-height: 18em;
  padding: 1%;
}
* html #trash
{
  height: 18em;
}
/* IE6 */
#trash h4
{
  line-height: 16px;
  margin: 0 0 0.4em;
}
#trash h4 .ui-icon
{
  float: left;
}
#trash .gallery h5
{
  display: none;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/UI/ui.all.css" rel="stylesheet" type="text/css" />

  <script src="jQuery/jquery-1.3.1.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.core.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.draggable.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.droppable.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.resizable.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.dialog.js" type="text/javascript"></script>

  <link href="jQuery/UI/demos.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/simplePhoto/StyleSheet.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/simplePhoto/JScript.js" type="text/javascript"></script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div class="demo ui-widget ui-helper-clearfix">
  <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
    <li class="ui-widget-content ui-corner-tr">
      <h5 class="ui-widget-header">Sea 1</h5>
      <img src="jQuery/simplePhoto/images/sea_min.jpg" alt="Sea #1" width="96" height="72" />
      <a href="jQuery/simplePhoto/images/sea.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> 
      <a href="#nogo" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> 
    </li>
    <li class="ui-widget-content ui-corner-tr">
      <h5 class="ui-widget-header">Sea 2</h5>
      <img src="jQuery/simplePhoto/images/sea2_min.jpg" alt="Sea #2" width="96" height="72" />
      <a href="jQuery/simplePhoto/images/sea2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> 
      <a href="#nogo" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> 
    </li>
    <li class="ui-widget-content ui-corner-tr">
      <h5 class="ui-widget-header">Tree 1</h5>
      <img src="jQuery/simplePhoto/images/tree_min.jpg" alt="Tree #1" width="96" height="72" />
      <a href="jQuery/simplePhoto/images/tree.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> 
      <a href="#nogo" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> 
    </li>
    <li class="ui-widget-content ui-corner-tr">
      <h5 class="ui-widget-header">Tree 2</h5>
      <img src="jQuery/simplePhoto/images/tree2_min.jpg" alt="Tree #2" width="96" height="72" />
      <a href="jQuery/simplePhoto/images/tree2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> 
      <a href="#nogo" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> 
    </li>      
  </ul>
  <div id="trash" class="ui-widget-content ui-state-default">
    <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
  </div>
</div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

Droppable Photo Manager

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

Droppable Photo Manager

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5