ドラッグアンドドロップで要素ごと(今回の場合画像)のカウントをしたいです
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")とすればいいかなと思い試したりしましたがうまくできません
なにかいい方法があれば教えていただきたいですよろしくお願いします。
$("#trash li").length
で全部数えるだけでいいのでは?+1, -1する必要もないと思います。.length
使っていますね。何が問題なのかよくわかりません。