1

ドラッグアンドドロップで要素ごと(今回の場合画像)のカウントをしたいです

http://codepen.io/anon/pen/MwmMyY

$(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) {
        
        var dragId = ui.draggable.attr("id");
        var len = $('<li id=' +  dragId + '>').length;
        var lenn = $('<li id=' + dragId + '>' )
        
        
        if(dragId == 1 && len == 0){
          $(this).append('<span class="cc1">1</span>');
        }else if (dragId == 2 && len == 0){
          $(this).append('<span class="cc1">1</span>');
        }else if (dragId == 3 && len == 0){
          $(this).append('<span class="cc1">1</span>');
        }else if (dragId == 4 && len == 0){
         $(this).append('<span class="cc1">1</span>');
        }
 

        
        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 = "";

    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 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;
}
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">


<div class="ui-widget ui-helper-clearfix">
  <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
    <li id="1" 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 id="2" 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 id="3" 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 id="4" 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>

上記のようにifでやろうとしていますがうまくいきません。

・要素ごとのドラッグ時にidを取得し、ドロップ時にそのidがなければ要素の追加とカウント(1)を出し、すでにそのidの要素があればカウントだけ+1
・要素をドロップエリアからだしたらカウントを−1
という処理をしたいです。

ドロップエリアにドラッグ中の要素があるかを調べる必要があると思うのですが
$("#trash li").find("id")とすればいいかなと思い試したりしましたがうまくできません

なにかいい方法があれば教えていただきたいですよろしくお願いします。

2
  • $("#trash li").lengthで全部数えるだけでいいのでは?+1, -1する必要もないと思います。 Commented 2015年6月18日 19:57
  • すでに別の箇所では.length使っていますね。何が問題なのかよくわかりません。 Commented 2015年6月18日 20:03

1 件の回答 1

1

こんな感じですか?

$(function() {
  var $gallery = $("#gallery"),
    $trash = $("#trash"),
    $items = $("#items");
  var numOfEachId = {};

  $("li", $gallery).draggable({
    cancel: "a.ui-icon",
    revert: "invalid",
    containment: "document",
    helper: "clone",
    cursor: "move"
  });

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

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

  function deleteImage($item) {
    var dragId = $item.attr("id");
    if (!(dragId in numOfEachId)) {
      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("<span class='cc1'>1<span>").appendTo($list).fadeIn(function() {
        obj
          .animate({
            width: "48px"
          })
          .find("img")
          .animate({
            height: "36px"
          });
      });
      numOfEachId[dragId] = 1;
    } else {
      updateCount(dragId, 1);
    }
  }

  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) {

    var dragId = $item.attr("id");
    if (numOfEachId[dragId] <= 1) {
      $item.fadeOut(function() {
        $item.remove();
        $("#items").text($("li", $("ul", $trash)).length);
      });
      delete numOfEachId[dragId];
    } else {
      updateCount(dragId, -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;
  }

  function updateCount(dragId, val) {
    var cnt = numOfEachId[dragId] + val;
    numOfEachId[dragId] = cnt;
    var obj = $('li#'+dragId, $("ul", $trash));
    $('.cc1', obj).text(cnt);
  }

  $("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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<div class="ui-widget ui-helper-clearfix">
  <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
    <li id="1" 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 id="2" 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 id="3" 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 id="4" 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>
 

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

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