Question

我正在尝试编写1个应用程序，其中有一些“p”标记可以拖动，1个“div”标记作为删除区域。

当我将“p”标签拖入放置区域时，它们会附加在放置区域中。

我可以拖动10“p”标签以及更多，但我想当我拖动新的“p”标签时，旧的“p”标签必须删除或替换

请给我一些建议！非常感谢

这是我的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>jQuery UI Touch Punch - Mobile Device Touch Event Support for jQuery UI</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
    <link href="css/jquery-ui.css" rel="stylesheet">
    <link href="css/jquery-ui1.css" rel="stylesheet">

    <style>body { background:#fff; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; }</style>

    <script src="js/cordova-2.5.0.js"></script>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/jquery.mobile-1.1.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>

  </head>
  <body>
    <div class="container">
        <script>
        $(function() {

          var chu = ["aaa","bbb","ccc","ddd","eee","fff","ggg","hhh","jjj","kkk","lll","mmm"];
          $("p").text(function(){
              return chu[ Math.floor((Math.random()*chu.length)+0)];
            });
          var c = 0;

          $('#dragSource p').draggable({
              helper: function(){
              var selected = $('#dragSource').parents('p');
              if (selected.length === 0) {
                selected = $(this);
              }
              var container = $('<div/>').attr('id', 'draggingContainer');
              container.append(selected.clone());
              return container;
            }
          });

          $('#c').droppable({
              tolerance: 'pointer',
              drop: function(event, ui){
                  $(this).append(ui.helper.children());
                  c++;
                  while(c == 2) {
                      $(this).find('p').remove();
                      c = 0;
                  }
            }
          });

        });
        </script>
      <div class="demo">
      <div id="dragSource" class="droppableContainer">
          <p></p>
          <p></p>
          <p></p>
          <p></p>
      </div>
      <input id="canvasDraw" type="button" value="New Game"/>
      <ul id="c" class="droppableContainer" style="display:inline;border:1px solid #d3d3d3;width: 150px; height: 150px;float:left;vertical-align: middle;">
      </ul>
      </div><!-- End demo -->
    </div>
    </body>
</html>

修改

我改变掉落区域（从“ul”标签变成“输入”标签）但是它的部件不起作用;请给我一些建议！我是新人，对网络知之甚少！

这是我的改变：

<input id="c" class="droppableContainer" style="display:inline;border:1px solid #d3d3d3;width: 150px; height: 150px;float:left;vertical-align: middle;"/>

和

 $('#c').droppable({
          tolerance: 'pointer',
          drop: function(event, ui){
              $(this).disable();
              $(this).find('p').remove();
              $(this).append(ui.helper.children());
              htmlOfDroppedElement = $(ui.draggable).html();
              pElementToBeReplaced = $(this).find('p');
              $(pElementToBeReplaced).html(htmlOfDroppedElement);
        }
      });

编辑2：

我已经这样做了

htmlOfDroppedElement = $(ui.draggable).html();
                $(this).val(htmlOfDroppedElement);

Answer 1

$('#c').droppable({
    tolerance: 'pointer',
        drop: function(event, ui) {
            htmlOfDroppedElement = $(ui.draggable).html();
            pElementToBeReplaced = $(this).find('p');
            $(pElementToBeReplaced).html(htmlOfDroppedElement);
        }
    });

在这里，我只是将droppable div的<p>元素中的html替换为可拖动div的<p>元素。

在拖放区域中拖动时替换元素

1 个答案: