问题：

设置元素可拖动的位置

诸葛令

2023-03-14

我有一个jquery函数，它允许一个元素可以拖动和调整大小，并且工作得很好。我想给它添加的是设置一个元素可以拖动和调整大小的位置。更具体地说，在我的代码中，我想让我的元素可以在两行(v1和vh）的空格之间拖动。有没有办法做到这一点？感谢任何帮助。提前道谢。

null

    $(".box").mouseup(function () {
        $(this).find('iframe').fadeIn('slow');
    }).mousedown(function () {
        $(this).find('iframe').hide();
    });

    $(function () {
        $(".box")
            .resizable()
            .draggable();
    });

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32%;
    height: 30%;
    background-color: #2b2d2f;
    color: black;
    position: absolute;
    top: 1%;    
}

.box h4{
    color: white;
    font-size: 20px;
    text-align:center;   
}

.vl {
    height: 100%;
    position: absolute;
    right: 5%;
    top: 0;
    background-color: red;
    width: 2.5px;
    height: 100%;
    overflow: hidden;
}

.vh {
    width: 100%;
    position: absolute;
    top: 75%;
    background-color: red;
    height: 2.5px;
    width: 100%;
    overflow: hidden;
}

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
        integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
 
</head>
<body>

<div class="box">
<h4>box</h4>
</div>

    <div class="vl">
    </div>
    <div class="vh">
    </div>

</body>
</html>

null

共有2个答案

夹谷信鸿

2023-03-14

一种方法是将盒子包装在一个适合您想要的区域的容器中，并使用containment：“parent”

null

function getContainerDimensions() {
  const buffer = 6 // used in demo to prevent borders overlap
  return {
    width: $('.vl').offset().left - buffer,
    height: $('.vh').offset().top - buffer
  }
}

$(function() {
  const $cont = $('<div id="container">').css(getContainerDimensions())
  $(".box").wrap($cont)
    .resizable({containment: "parent"})
    .draggable({containment: "parent"});
});

body {
  padding: 0;
  margin: 0
}

#container {
  border: 2px solid green
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32%;
  height: 30%;
  background-color: #2b2d2f;
  color: black;
  position: absolute;
  top: 1%;
}

.box h4 {
  color: white;
  font-size: 20px;
  text-align: center;
}

.vl {
  height: 100%;
  position: absolute;
  right: 5%;
  top: 0;
  background-color: red;
  width: 2.5px;
  height: 100%;
  overflow: hidden;
}

.vh {
  width: 100%;
  position: absolute;
  top: 75%;
  background-color: red;
  height: 2.5px;
  width: 100%;
  overflow: hidden;
}

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

</head>

<body>

  <div class="box">
    <h4>box</h4>
  </div>

  <div class="vl">
  </div>
  <div class="vh">
  </div>

</body>

</html>

田远

2023-03-14

draggable()jQueryUI组件有一个containment参数。其中一个签名允许您提供4个坐标，这相当于可拖动元素应该限制到的边界框。

要计算这个值，可以分别检索垂直行和水平行的left和top，减去.box的宽度/高度。试试看：

null

jQuery($ => {
  let $box = $('.box');
  let $vl = $('.vl');
  let $vh = $('.vh');

  $box
    .resizable()
    .draggable({
      containment: [
        8, // default body padding, amend as necessary
        8, // default body padding, amend as necessary
        Math.ceil(parseFloat($vl.css('left'))) - Math.floor(parseFloat($box.width())),
        Math.ceil(parseFloat($vh.css('top'))) - Math.floor(parseFloat($box.height()))
      ]
    });
});

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32%;
  height: 30%;
  background-color: #2b2d2f;
  color: black;
  position: absolute;
  top: 1%;
}

.box h4 {
  color: white;
  font-size: 20px;
  text-align: center;
}

.vl {
  height: 100%;
  position: absolute;
  right: 5%;
  top: 0;
  background-color: red;
  width: 2.5px;
  height: 90%;
  overflow: hidden;
}

.vh {
  position: absolute;
  top: 75%;
  background-color: red;
  height: 2.5px;
  width: 95%;
  overflow: hidden;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<div class="box">
  <h4>box</h4>
</div>
<div class="vl"></div>
<div class="vh"></div>

类似资料：

在可拖动元素上设置z-index

问题内容：我正在尝试使用jQuery在可拖动元素上设置z-index。您可以在这里看到我在说什么以及到目前为止我所拥有的：这是非常原始的，并且存在问题。关于如何使最后点击的元素具有最高z- index的任何想法，而不是将所有其余元素重置为基数，而是让它们逐步执行，因此，最后一次点击的第二个具有第二最高的元素，依此类推。我遇到的另一个问题是，它仅在完全单击事件上起作用，而可拖动功能通过单击并按
Angular2在拖动时更改可拖动元素的内容

你好，堆栈溢出，目前正在处理一个需要拖动元素的任务；不是本机API所做的图像拖动，而是拖动实际的元素。元素应该显示一个要删除的位置框，并在将其拖过一个区域时更改其自身的内部内容，该区域将在删除时删除该元素。到目前为止，我发现了这个有用的指令，帮助我做到这一点https://xieziyu.github.io/angular2-draggable/#/usage/basic 问题是，一旦元素通过某个
设置动态变化的元素的左位置（在循环中）

我有以下JavaScript代码*** var pos=文档。getElementById（'pos'）<位置样式。位置='相对'<位置样式。宽度='100%'<位置样式。高度='100%'<位置样式。背景='灰色' 对于（i=1；i HTML代码：*** 第一个元素的位置正确，顶部为0px，左侧为30px，但是第二个和第三个元素的位置不正确，我尝试使用显示作为内联元素，但仅将它们设置在同一行上，
拖动原始元素HTML5拖放

我正在使用本机拖放html5 api开发拖放界面。我们已经在其他部分使用了jQuery拖动，但是它在这个特定部分的表现很差，所以我们使用原始的JavaScript。本质上，标记看起来像这样... 我为“dragstart”创建一个addEventListener并运行以下函数它将我的类完美地应用于原始元素，但我似乎不能移动原始元素。浏览器创建克隆/幽灵图像...我看到你可以创建自己的图像显示，
硒拖放到不可见的位置

我尝试了好几种方法情景1：方案2：还有很多其他方法，通过移动到放置位置并在其上添加等待，但它们似乎都不起作用。当拖放位置不可见时，是否有其他方法进行拖放。任何帮助都将不胜感激。谢谢
拖放到pdf文件后获取元素位置（Angulal-Nodejs）

我使用angular ng2 pdf viewer和angular material cdkDrag来拖动元素。在我的后端，我使用hummusJS/hummusRecipe修改pdf文件。我寻找一种方法来知道我把元素放在pdf文件的什么地方，然后向后端的coordinate发出请求，以知道元素需要放在pdf文件的什么地方。这是我在nodejs上的函数：我的客户Angular：

设置元素可拖动的位置

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档