10122


こんにちは、度々すみません  
今、monacaを使いドラッグアンドドロップでドロップされた画像をボタンクリックでローカルストレージに保存し、次のページで表示させようとしています。

そこで、ボタンをクリックすると画像（パス）をストレージに保存させようとしていますが  
drop後のtrush内の値を保存させようと

[code]

    $(function() {
      $("#next").click(onnext);
    });
    
    function onnext() {
        var gazo = $("#trash").html();
        var tes = {
            trash:gazo,  
        }
        console.log("#trush");
    
        localStorage.setItem("test", JSON.stringify(tes));
    }
    
[/code]

このようにしたのですが `#trush` をconsole.logで確認すると

[code]

    #trush
    {"trash":"\n    \n      Drop Items:1\n      \n    \n  \n      High Tatras\n      \n      \n    "}
    
[/code]

このように表示され画像のパスが入っていません。  
ドロップで `#trush` に画像が入っているから表示されていると思うのですが  
`#trush` 内を取り出すと空に。。。  
どうすればいいでしょうか、よろしくお願い致します。

[code]

    $(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;
        });
      });
    
    //ボタンクリック
    $(function() {
    
      $("#next").click(onnext);
    });
    
    function onnext() {
      var text = $("#trash").html();
      var tes = {
        trash:text,
      }
    
      localStorage.setItem("test", JSON.stringify(tes));
    }
[/code]

[code]

    /*
    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;
    }
[/code]

[code]

    <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>
    　<a data-role="button" data-icon="check" id="next" data-theme="b">次へ</a>
    </div>
[/code]


CC BY-SA 3.0
2015-05-13T08:49:30.807
10114
2019-12-13T19:55:45.837
2015-05-13T11:16:47.547
3516
9630
question
jquery jquery-ui
ドロップされた要素を保存する


こんな感じですかね。  
<http://codepen.io/negibouze/full/mJVLqo/>

[code]

      $(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;
        });
    
        $("button#save").click(function() {
          var items = $("li", $("ul", $trash));
          for (var i = 0, len = items.length; i < len; i++) {
            var item = items[i];
            var element = {
              title: $("h5", item).text(),
              img: $("img", item).attr("src")
            }
           localStorage.setItem(i, JSON.stringify(element));
          }
          // 保存されたことを確認する
          for (var i = 0, len = localStorage.length; i < len; i++) {
            var element = JSON.parse(localStorage.getItem(i));
            $("ul#storedItems").append("<li> Title : " + element.title + "　File : " + element.img);
          }
        });
    
        $("button#clear").click(function() {
          localStorage.clear();
         $("ul#storedItems li").remove();
        });
      });
    
    /*  function updateCount(dragId, val) {
        var cnt = numOfEachId[dragId] + val;
        numOfEachId[dragId] = cnt;
        var obj = $('li#'+dragId, $("ul", $trash));
        $('.cc1', obj).text(cnt);
      }*/
[/code]

[code]

    /*
    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;
    }
[/code]

[code]

    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <p>https://jqueryui.com/droppable/#photo-manager</p>
    <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>
      <button type="button" id="save">Save</button>
      <button type="button" id="clear">Clear</button>
      <p>Stored Items</p>
      <ul id="storedItems">
      </ul>
    </div>
[/code]

----- 念のための補足 -----  
大きい方が見やすいかなと思いFull Pageのリンクを貼っています。  
ソースコードを見る場合は左下の「Edit this Pen」を押してください。  
----- ここまで -----

ドロップした要素の数を取得して表示している

[code]

    $("#items").text($("li", $("ul", $trash)).length);
    
[/code]

とか、ドロップしている要素

[code]

    <li class="ui-widget-content ui-corner-tr">
      <h5 class="ui-widget-header">High Tatras 4</h5>
      <img src="hoge" alt="hoge" width="96" height="72">
      <a href="hoge" title="View larger image" class="hoge">View larger</a>
      <a href="hoge" class="hoge">Delete image</a>
    </li>
    
[/code]

をベースに考えると分かりやすいと思います。

例えば、  
`$("li", $("ul", $trash)).length`でドロップした要素数が取れる  
= `$("li", $("ul", $trash))`でドロップした要素が取れる  
といった感じです。


CC BY-SA 4.0
2015-05-13T12:05:00.207
10122
2019-12-13T19:55:45.837
2019-12-13T19:55:45.837
32986
3516
10114
answer