0

我正在尝试编写 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”标签），但它的cobe不起作用；请给我一些建议！我是新手，对网络知之甚少！

这是我的改变：

<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);
4

1 回答 1

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

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

于 2013-03-19T09:08:56.880 回答