2

こんにちは
画像のドラッグアンドドロップについて質問です
https://jqueryui.com/droppable/#photo-manager
これを参考にしていますが
やりたいこと
・画像をドラッグしてもクローンを残したい
・ドロップエリアで数字をカウントさせたい

やったこと
・クローンに関してはもともとdraggableエリアに
  helper: "clone", があったのですがこれはドロップエリアに対して効いているものと
  思われます。なので改めて

$(".ui-widget-content ui-corner-tr").draggable(
    {
        helper: "clone"
    }
);

これを追加しましたがダメでした。

・ドロップエリアでの数字のカウントは

// image deletion function
var recycle_icon =  "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";

というところをカウント数の表示に置き換えられると思い,a要素を0に置き換えてみましたがドラッグできない状態になってしまいました。

またカウントのプログラムは

drop : function(event, ui){
    //  dragされてきたオブジェクトを取得してクローン作製
    var dragId = ui.draggable.attr("id");
    if($(this).find(".drop" + dragId).length == 0){
        $('#cnt').text(++counter);
    }
} ,
out : function (event , ui){
    var dragId = ui.draggable.attr("id");
    $(this).find(".drop" + dragId).remove();
    $('#cnt').text(--counter);
}

こちらを参考にさせていただこうと思っています。
いい方法などあれば教えていただきたいですよろしくお願い致します。

2 件の回答 2

0

参考ページをカスタマイズしてみました。
参考ページだとgallery側でもdropイベントが起こせるのでoutはいらなそうですね。
※jQueryはあまり得意ではないので参考程度で。

  $(function() {
    // there's the gallery and the trash
    var $gallery = $("#gallery"),
        $trash = $("#trash"),
        $items = $("#items");

    // let the gallery items be draggable
    $("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: "document",
      helper: "clone",
      cursor: "move"
    });

    // let the trash be droppable, accepting the gallery items
    $trash.droppable({
      accept: "#gallery > li",
      activeClass: "ui-state-highlight",
      drop: function(event, ui) {
        deleteImage(ui.draggable);
      }
    });

    // let the gallery be droppable as well, accepting items from the trash
    $gallery.droppable({
      accept: "#trash li",
      activeClass: "custom-state-active",
      drop: function(event, ui) {
        recycleImage(ui.draggable);
      }
    });

    // image deletion function
    var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";

    function deleteImage($item) {
      var obj = cloneObject($item);
      var $list = $("ul", $trash).length ?
          $("ul", $trash) :
		      $("<ul class='gallery ui-helper-reset'/>").appendTo($trash);
      obj.find("a.ui-icon-trash").remove();
      obj.append(recycle_icon).appendTo($list).fadeIn(function() {
        obj
          .animate({
          width: "48px"
        })
          .find("img")
          .animate({
          height: "36px"
        });
      });
      $("#items").text($("li", $list).length);
		}

    // image recycle function
    var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";

    function recycleImage($item) {
      
      $item.fadeOut(function() {
        $item.remove();
	      $("#items").text($("li", $("ul", $trash)).length);
      });
    }

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

      if ($modal.length) {
        $modal.dialog("open");
      } else {
        var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />")
          .attr("src", src).appendTo("body");
        setTimeout(function() {
          img.dialog({
            title: title,
            width: 400,
            modal: true
          });
        }, 1);
      }
    }

    function cloneObject($item) {
      var obj = $item.clone();
      obj.draggable({
        cancel: "a.ui-icon",
        revert: "invalid",
        containment: "document",
        helper: "clone",
        cursor: "move"
      });
      obj.click(function(event) {
        var $item = $(this),
          $target = $(event.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;
      });

      return obj;
    }

    // resolve the icons behavior with event delegation
    $("ul.gallery > li").click(function(event) {
      var $item = $(this),
        $target = $(event.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;
    });
  });
/*
Theme Name: jqueryui-com
Template: jquery
*/
a,
.title {
  color: #B24926;
}

#content a:hover {
  color: #333;
}

#banner-secondary p.intro {
  padding: 0;
  float: left;
  width: 50%;
}

#banner-secondary .download-box {
  border: 1px solid #aaa;
  background: #333;
  background: -webkit-linear-gradient(left, #333 0%, #444 100%);
  background: linear-gradient(to right, #333 0%, #444 100%);
  float: right;
  width: 40%;
  text-align: center;
  font-size: 20px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

#banner-secondary .download-box h2 {
  color: #71D1FF;
  font-size: 26px;
}

#banner-secondary .download-box .button {
  float: none;
  display: block;
  margin-top: 15px;
}

#banner-secondary .download-box p {
  margin: 15px 0 5px;
}

#banner-secondary .download-option {
  width: 45%;
  float: left;
  font-size: 16px;
}

#banner-secondary .download-legacy {
  float: right;
}

#banner-secondary .download-option span {
  display: block;
  font-size: 14px;
  color: #71D1FF;
}

#content .dev-links {
  float: right;
  width: 30%;
  margin: -15px -25px .5em 1em;
  padding: 1em;
  border: 1px solid #666;
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 5px;
  box-shadow: -2px 2px 10px -2px #666;
}

#content .dev-links ul {
  margin: 0;
}

#content .dev-links li {
  padding: 0;
  margin: .25em 0 .25em 1em;
  background-image: none;
}

.demo-list {
  float: right;
  width: 25%;
}

.demo-list h2 {
  font-weight: normal;
  margin-bottom: 0;
}

#content .demo-list ul {
  width: 100%;
  border-top: 1px solid #ccc;
  margin: 0;
}

#content .demo-list li {
  border-bottom: 1px solid #ccc;
  margin: 0;
  padding: 0;
  background: #eee;
}

#content .demo-list .active {
  background: #fff;
}

#content .demo-list a {
  text-decoration: none;
  display: block;
  font-weight: bold;
  font-size: 13px;
  color: #3f3f3f;
  text-shadow: 1px 1px #fff;
  padding: 2% 4%;
}

.demo-frame {
  width: 70%;
  height: 350px;
}

.view-source a {
  cursor: pointer;
}

.view-source > div {
  overflow: hidden;
  display: none;
}

@media all and (max-width: 600px) {
  #banner-secondary p.intro, #banner-secondary .download-box {
    float: none;
    width: auto;
  }
  #banner-secondary .download-box {
    overflow: auto;
  }
}

@media only screen and (max-width: 480px) {
  #content .dev-links {
    width: 55%;
    margin: -15px -29px .5em 1em;
    overflow: hidden;
  }
}

#gallery {
  float: left;
  width: 65%;
  min-height: 12em;
}

.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%;
}

#trash h4 {
  line-height: 16px;
  margin: 0 0 0.4em;
}

#trash h4 .ui-icon {
  float: left;
}

#trash .gallery h5 {
  display: none;
}
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="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">High Tatras</h5>
      <img src="https://jqueryui.com/resources/demos/droppable/images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72">
      <a href="https://jqueryui.com/resources/demos/droppable/images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
      <a href="link/to/trash/script/when/we/have/js/off" 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">High Tatras 2</h5>
      <img src="https://jqueryui.com/resources/demos/droppable/images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72">
      <a href="https://jqueryui.com/resources/demos/droppable/images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
      <a href="link/to/trash/script/when/we/have/js/off" 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">High Tatras 3</h5>
      <img src="https://jqueryui.com/resources/demos/droppable/images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72">
      <a href="https://jqueryui.com/resources/demos/droppable/images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
      <a href="link/to/trash/script/when/we/have/js/off" 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">High Tatras 4</h5>
      <img src="https://jqueryui.com/resources/demos/droppable/images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72">
      <a href="https://jqueryui.com/resources/demos/droppable/images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
      <a href="link/to/trash/script/when/we/have/js/off" 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">
      Drop Items:<span id="items">0</span>
      <!-- <span class="ui-icon ui-icon-trash"></span> Trash -->
    </h4>
  </div>
</div>

0
helper: "clone"

は、「ドラッグ中にドラッグ対象の要素を基の位置に表示しておく」ためのものなので、
下記の質問の回答にあるような方法(ドロップ後に要素を再生成する)方法はどうでしょう?

https://stackoverflow.com/questions/20142709

$( "#draggable" ).draggable({
            helper : "clone"
});
$( "body" ).droppable({
    drop: function( event, ui ) {
        $(ui.helper).removeClass('ui-draggable-dragging');
        var newDiv = $(ui.helper).clone().removeClass('ui-draggable-dragging');
        $(this).append(newDiv);
  }  
});

http://jsfiddle.net/Jje3H/

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。