Jquery UI：如何使可拖动的div可调整大小

Question

我试图通过jquery使我的可拖动div元素也可以调整大小 ui resizable()方法。

由于某种原因，我可以拖动它，但它不会让我调整它。

＆＃13;

＆＃13;

$('.resize').resizable({
  grid: [1, 1]
});
$('.dragThis').draggable({
  drag: function() {
    var offset = $(this).offset();
    var xPos = offset.left;
    var yPos = offset.top;
    $('#posX').text('x: ' + xPos);
    $('#posY').text('y: ' + yPos);
  }
});

＆＃13;

.dragThis {
  position: absolute;
  top: 100px;
  left: 100px;
  overflow: visible;
  width: 150px;
  height: 150px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('https://image.flaticon.com/icons/png/128/148/148836.png');
}

#outline {
  position: absolute;
  border: 1px dashed black;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  -webkit-animation: rotate 10s linear infinite;
  position: absolute;
  z-index: 30000;
  transform: translate(-50%, -50%);
}

＆＃13;

<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" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<div class="resize dragThis">
  <ul style="font-family: 'Nunito'; position:absolute; left:-20px; top:-20px; list-style: none; font-size: 12px; font-weight:600;">
    <li id="posX"></li>
    <li id="posY"></li>
  </ul>
  <div style="position:absolute; top:50%; left:50%; width:10px; height:10px; background-color:white; z-index:1000; border-radius:50%; border:1px solid black; transform: translate(-50%, -50%);">
    <div style="width:9px; height:1px; border:0.2px solid black; position:absolute; top:50%; left:0px; transform: translateY(-50%);"></div>
    <div style="width:1px; height:9px; border:0.2px solid black; position:absolute; top:0px; left:50%; transform: translateX(-50%);"></div>
  </div>
  <div id="outline"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

因此可调整大小的功能是正确添加调整大小句柄，但问题是它们是零像素高，因为您还没有包含jQuery UI CSS样式表，它为您调整调整大小句柄的样式。

您可以自己添加一些CSS，也可以选择所需的样式表under the Themes heading on the jQuery site。

在下面的代码段中，我在右侧添加了一个大的灰色手柄，您可以拖动它来调整大小，作为添加自己的CSS的示例。

＆＃13;

＆＃13;

$('.dragThis').draggable({
  drag: function() {
    var offset = $(this).offset();
    var xPos = offset.left;
    var yPos = offset.top;
    $('#posX').text('x: ' + xPos);
    $('#posY').text('y: ' + yPos);
  }
});
$('.resize').resizable({
  grid: [1, 1],
  handles: 'e'
});

＆＃13;

.dragThis {
  position: absolute;
  top: 100px;
  left: 100px;
  overflow: visible;
  width: 150px;
  height: 150px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('https://image.flaticon.com/icons/png/128/148/148836.png');
}

#outline {
  position: absolute;
  border: 1px dashed black;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  -webkit-animation: rotate 10s linear infinite;
  position: absolute;
  z-index: 30000;
  transform: translate(-50%, -50%);
}
.ui-resizable-handle {
  width: 15px;
  height: 100%;
  display: block;
  background-color: gray;
  position: absolute;
  right: 0;
  top: 0;
  cursor: ew-resize;
}

＆＃13;

<div class="resize dragThis">
  <ul style="font-family: 'Nunito'; position:absolute; left:-20px; top:-20px; list-style: none; font-size: 12px; font-weight:600;">
    <li id="posX"></li>
    <li id="posY"></li>
  </ul>
  <div style="position:absolute; top:50%; left:50%; width:10px; height:10px; background-color:white; z-index:1000; border-radius:50%; border:1px solid black; transform: translate(-50%, -50%);">
    <div style="width:9px; height:1px; border:0.2px solid black; position:absolute; top:50%; left:0px; transform: translateY(-50%);"></div>
    <div style="width:1px; height:9px; border:0.2px solid black; position:absolute; top:0px; left:50%; transform: translateX(-50%);"></div>
  </div>
  <div id="outline"></div>
</div>
<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" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;