Question

在这里，我希望我的第二张和其他图像被放置在垃圾区域，就像第一张图片一样...条件是 - 我将图像保存在图库中，我必须在垃圾区域提供图像。浏览器是可拖动的垃圾是可以丢弃的..请在我的代码中帮助......

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">


  <title>jQuery UI Droppable - Simple photo manager</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

  <style>
    #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;
      display: block;
    }
    .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;
      display: block;
    }
    .photo1 {
      width: 300px;
      height: 100px;
      border: 1px solid #000;
    }
    .photo2 {
      width: 300px;
      height: 100px;
      border: 1px solid #000;
    }
    .photo3 {
      width: 300px;
      height: 100px;
      border: 1px solid #000;
    }
    .photo4 {
      width: 300px;
      height: 100px;
      border: 1px solid #000;
    }
    .clr {
      clear: both;
    }
    #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;
    }
    //#trash h4 {
      line-height: 16px;
      margin: 0 0 0.4em;
    }
    //#trash h4 .ui-icon {
      float: left;
    }
    //#trash .gallery h5 {
      display: none;
    }
  </style>
  <script>
    $(function() {

      var $gallery = $("#gallery");
      var $trash = $("#trash");
      var $photo1 = $("#photo1");
      var $photo2 = $("#photo2");
      var $photo3 = $("#photo3");
      var $photo4 = $("#photo4");



      // 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) {
          arry = ["images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg"];
          var path = $('img').attr('src');
          var path1 = $('img' + '#c2').attr('src');
          var path2 = $('img' + '#c3').attr('src');
          var path3 = $('img' + '#c4').attr('src');


          if ($("#photo1:has(img.photo1)").length == 0) {

            alert("yes");

            document.getElementById('dc1').src = path;
            $(this).append($(gallery.draggable).clone());

          }
          $(".ui-draggable-dragging").css({
            'display': 'none'
          });



        }



      });


      // 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);
        }
      });


    });
  </script>
</head>

<body>

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

        <img src="images/2.jpg" width="96" height="72" id="c1">


      </li>
      <li class="ui-widget-content ui-corner-tr">

        <img src="images/3.jpg" width="96" height="72" id="c2">


      </li>
      <li class="ui-widget-content ui-corner-tr">

        <img src="images/4.jpg" width="96" height="72" id="c3">


      </li>
      <li class="ui-widget-content ui-corner-tr">

        <img src="images/5.jpg" width="96" height="72" id="c4">


      </li>
    </ul>

    <div id="trash" class="ui-widget-content ui-state-default dummy">
      <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>


      <div class="photo1" id="photo1">
        <img src="" width="96" height="72" id="dc1">
      </div>

      <div class="photo2" id="photo2">
        <img src="" width="96" height="72" id="dc2">
      </div>
      <div class="photo3" id="photo3">
        <img src="" width="96" height="72" id="dc3">
      </div>
      <div class="photo4" id="photo4">
        <img src="" width="96" height="72" id="dc4">
      </div>

      <div class="clr"></div>
    </div>
    <div class="clr"></div>
  </div>
  <div class="clr"></div>

</body>

</html>

Answer 1

参见 working demo here

HTML更改：在垃圾箱中添加了div.basket。

<div id="trash" class="ui-widget-content ui-state-default dummy">
  <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
  <div class="basket"></div>
  <div class="clr"></div>
</div>

javascript更改：$ trash.droppable =＆gt; drop method已更改，我们可以获取拖动的图片，如ui.draggable.html()

代码段在这里：

    $(function() {
      var $gallery = $("#gallery"),
        $trash = $("#trash");
      // 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) {
          $(".basket",this).append(ui.draggable.html());
        }
      });

      // 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);
        }
      });

    });

    #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;
      display: block;
    }
    .gallery li h5 {
      margin: 0 0 0.4em;
      cursor: move;
    }
    .gallery li a {
      float: right;
    }
    .gallery li a.ui-icon-zoomin {
      float: left;
    }
    .clr {
      clear: both;
    }
    #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;
    }

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery UI Droppable - Simple photo manager</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
  <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">
        <img src="//placehold.it/100/100.png" width="96" height="72" id="c1">
      </li>
      <li class="ui-widget-content ui-corner-tr">
        <img src="//placehold.it/100/aff.png" width="96" height="72" id="c2">
      </li>
      <li class="ui-widget-content ui-corner-tr">
        <img src="//placehold.it/100/abc.png" width="96" height="72" id="c3">
      </li>
      <li class="ui-widget-content ui-corner-tr">
        <img src="//placehold.it/100/efa.png" width="96" height="72" id="c4">
      </li>
    </ul>

    <div id="trash" class="ui-widget-content ui-state-default dummy">
      <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
      <div class="basket"></div>
      <div class="clr"></div>
    </div>
    <div class="clr"></div>
  </div>
  <div class="clr"></div>

</body>

</html>

jquery中可放置图像的图像src

1 个答案: