Question

有人在这里早些时候有这个问题：stackoverflow/7339543，但从未回过头来证明答案（不仅如此，而且在克隆中添加“ true，true”并不能解决问题，这在答案）。

我承认我有同样的问题。我将其发布到了一个Codepen中，在这里codepen/yZNMxP 但结果是：

我正在页面上创建可拖动的框，并向用户展示一种添加更多框的方法。当然……这些是不可拖动的。

我觉得我已经接近答案了，但也许不是。


    <!DOCTYPE html>
<html lang='en' class=''>

<head>

  <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.js"></script>

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">


  <style id="compiled-css" type="text/css">
    .hide {
      display: none;
    }
  </style>



  <script type="text/javascript">
    window.onload = function() {

      $(function() {

        $('.boxForm').submit(function(e) {
          e.preventDefault();
          var amount = $('.boxInput').val();
          for (i = 0; i < amount; i++) {
            var newBox = $('.hide').clone();
            newBox.removeClass('hide');
            newBox.appendTo('.grid');
          }
        });

      });

    }
  </script>



  <style class="cp-pen-styles">
    * {
      box-sizing: border-box;
    }

    body {
      font-family: sans-serif;
    }

    /* ---- grid ---- */

    .grid {
      background: #DDD;
      max-width: 600px;
    }

    /* clear fix */
    .grid:after {
      content: '';
      display: block;
      clear: both;
    }

    /* ---- .grid-item ---- */

    .grid-item {
      float: left;
      width: 100px;
      height: 100px;
      background: #fff;
      border: 2px solid hsla(0, 0%, 0%, 0.5);
    }

    .grid-item--width2 {
      width: 200px;
    }

    .grid-item--height2 {
      height: 200px;
    }

    .grid-item:hover {
      border-color: hsla(0, 0%, 100%, 0.5);
      cursor: move;
    }

    .grid-item.ui-draggable-dragging,
    .grid-item.is-positioning-post-drag {
      background: #C90;
      z-index: 2;
    }

    .packery-drop-placeholder {
      outline: 3px dashed hsla(0, 0%, 0%, 0.5);
      outline-offset: -6px;
      -webkit-transition: -webkit-transform 0.2s;
      transition: transform 0.2s;
    }
  </style>
</head>

<body>
  <h1>Add a box and drag</h1>


  <form class="boxForm">
    <input type="number" class="boxInput" />
    <input type="submit" value="Submit" />
  </form>



  <div class="grid">
    <div class="box hide grid-item"></div>
    <div class="grid-item grid-item--width2"></div>
    <div class="grid-item grid-item--height2"></div>
    <div class="grid-item grid-item--width2 grid-item--height2"><canvas id="bar-chart" height="220"></canvas></div>
  </div>


  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
  <script src='https://unpkg.com/packery@2/dist/packery.pkgd.js'></script>
  <script>
    // external js: packery.pkgd.js, jquery-ui-draggable.js

    // initialize Packery
    var $grid = $('.grid').packery({
      itemSelector: '.grid-item',
      // columnWidth helps with drop positioning
      columnWidth: 100
    });


    // make all items draggable
    var $items = $grid.find('.grid-item').draggable();
    // bind drag events to Packery
    $grid.packery('bindUIDraggableEvents', $items);
    //# sourceURL=pen.js
  </script>


  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent) {
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "3ba9uu9o"
      }], "*")
    }
  </script>



</body>

</html>

因此，我对不能做到的想法有些不满，但除非，是否有办法至少使新框不会出现在第一个框上？

非常感谢您的帮助。

-圣人。

试图使页面加载后可拖动框

0 个答案: