0

ドラッグできる「p」タグとドロップ領域としての「div」タグが1つあるアプリを1つ作成しようとしています。

「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」タグに）変更しましたが、コーブが機能しません。アドバイスをお願いします！私は新しく、ウェブについてほとんど知りません！

これが私の変更です：

<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 の要素内の html を<p>ドラッグ可能な div の要素に置き換えているだけです。

于 2013-03-19T09:08:56.880 に答える