Question

我使用draggble jquery-ui库。

我有两个可拖动的div和红色矩形元素。

＆＃13;

$("#toolbarArea").draggable();

＆＃13;

.toolbarArea {
  position: relative;
  z-index: 100;
  height: 30px;
  width: 400px;
}

.exosphere {
  border: solid 1px #333;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
}

#toolbarTitle {
  cursor: all-scroll;
  background-color: #ffffff;
  width: 30px;
  height: 100%;
  float: right;
}

#rslt {
  height: 50px;
  width: 50px;
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />

<div id="toolbarArea" class="toolbarArea exosphere" data-Owner="geomind" data-Date="11/2016">

  <span id="toolbarTitle" width="15px" height="15px" class="fa-stack fa-lg">
      <i class="fa fa-arrows" aria-hidden="true"></i>
  </span>

  <iframe id="frTools" style="width:90%;height:25px;overflow: hidden;"></iframe></div>
<div id="rslt"></div>

＆＃13;

我需要在拖动时使红色矩形重复toolbarArea位置。

我不想在toolbarArea div中放置红色矩形。

Answer 1

据我所知，你正试图同时移动红色矩形和工具栏？

然后如何将整个HTML块包装到另一个？

<div id="newId">


<div id="toolbarArea" class="toolbarArea exosphere" data-Owner="geomind" data-Date="11/2016"> 

   <span id="toolbarTitle" width="15px" height="15px" class="fa-stack fa-lg">
      <i class="fa fa-arrows" aria-hidden="true"></i>
  </span>

        <iframe id="frTools" style="width:90%;height:25px;overflow: hidden;"></iframe>

                </div>

            <div id="rslt"></div>
            </div>

然后将JS更改为：

$( "#newId" ).draggable();

Answer 2

如果我理解你，你想在移动工具栏时移动redsquare吗？

在这种情况下，您可以使用类似于this的自定义jQuery函数。通过使用该博客帖子中描述的功能，您可以查看元素移动的时间。每次移动时，您都可以通过这样做更新具有这些坐标的另一个元素：

$('#rlst').offset($('#toolbarArea').offset());

它不会是完美的，但我认为这是将两个元素分开并让它们相互移动的最佳方式。

Answer 3

查看您拥有的jQuery Draggable Events，start，stop和drag。

这是一个例子：

$("#toolbarArea").draggable({
  start: function() {
    $('#rslt').css('position', 'relative')
  },
  drag: function() {
    $('#rslt').offset($('#toolbarArea').offset());
  },
});

.toolbarArea {
  position: relative;
  z-index: 100;
  height: 30px;
  width: 400px;
}

.exosphere {
  border: solid 1px #333;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
}

#toolbarTitle {
  cursor: all-scroll;
  background-color: #ffffff;
  width: 30px;
  height: 100%;
  float: right;
}

#rslt {
  height: 50px;
  width: 50px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="toolbarArea" class="toolbarArea exosphere" data-Owner="geomind" data-Date="11/2016">

  <span id="toolbarTitle" width="15px" height="15px" class="fa-stack fa-lg">
      <i class="fa fa-arrows" aria-hidden="true"></i>
  </span>

  <iframe id="frTools" style="width:90%;height:25px;overflow: hidden;"></iframe>

</div>

<div id="rslt"></div>

如果你想保持元素之间的原始相对距离，你肯定需要添加一些逻辑。

但正如您所看到的那样，解决方案并非最佳，因为您在工具栏移动和红色框之间有一些延迟。但那是jQuery ui的限制。

拖动一个元素时如何使元素可拖动

3 个答案: