Question

我试图在拖放时将div相对于另一个div定位。我使用下面的代码，它在HTML5环境中运行良好。当我在QT环境中运行相同的文件时，它无法正常工作。这在所有设备中都无法正常工作：

$(ui.draggable).position({
    at: "center",
    my: "center",
    of: $(this)
})

还有另一种方法来实现同样的事情......

Answer 1

试试这个让我知道......

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery UI Position - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
    #parent {
      width: 60%;
      height: 40px;
      margin: 10px auto;
      padding: 5px;
      border: 1px solid #777;
      background-color: #fbca93;
      text-align: center;
    }
    .positionable {
      position: absolute;
      display: block;
      right: 0;
      bottom: 0;
      background-color: #bcd5e6;
      text-align: center;
    }
    #positionable1 {
      width: 75px;
      height: 75px;
    }
    #positionable2 {
      width: 120px;
      height: 40px;
    }
    select,
    input {
      margin-left: 15px;
    }
  </style>
  <script>
    $(function() {
      function position() {
        $(".positionable").position({
          of: $("#parent"),
          my: $("#my_horizontal").val() + " " + $("#my_vertical").val(),
          at: $("#at_horizontal").val() + " " + $("#at_vertical").val(),
          collision: $("#collision_horizontal").val() + " " + $("#collision_vertical").val()
        });
      }

      $(".positionable").css("opacity", 0.5);

      $("select, input").bind("click keyup change", position);

      $("#parent").draggable({
        drag: position
      });

      position();
    });
  </script>
</head>

<body>

  <div id="parent">
    <p>
      This is the position parent element.
    </p>
  </div>

  <div class="positionable" id="positionable1">
    <p>
      to position
    </p>
  </div>

  <div class="positionable" id="positionable2">
    <p>
      to position 2
    </p>
  </div>

  <div style="padding: 20px; margin-top: 75px;">
    position...
    <div style="padding-bottom: 20px;">
      <b>my:</b>
      <select id="my_horizontal">
        <option value="left">left</option>
        <option value="center">center</option>
        <option value="right">right</option>
      </select>
      <select id="my_vertical">
        <option value="top">top</option>
        <option value="center">center</option>
        <option value="bottom">bottom</option>
      </select>
    </div>
    <div style="padding-bottom: 20px;">
      <b>at:</b>
      <select id="at_horizontal">
        <option value="left">left</option>
        <option value="center">center</option>
        <option value="right">right</option>
      </select>
      <select id="at_vertical">
        <option value="top">top</option>
        <option value="center">center</option>
        <option value="bottom">bottom</option>
      </select>
    </div>
    <div style="padding-bottom: 20px;">
      <b>collision:</b>
      <select id="collision_horizontal">
        <option value="flip">flip</option>
        <option value="fit">fit</option>
        <option value="flipfit">flipfit</option>
        <option value="none">none</option>
      </select>
      <select id="collision_vertical">
        <option value="flip">flip</option>
        <option value="fit">fit</option>
        <option value="flipfit">flipfit</option>
        <option value="none">none</option>
      </select>
    </div>
  </div>


</body>

</html>

＆＃13;

jQueryUI可拖动定位无法正常工作

1 个答案: