在相同元素上可拖动和可调整大小的jQuery

哈希尔·帕特尔

我有一个<div class="outerDiv"></div>,我正在动态添加另一个div,我想在此范围内使其可拖动以及可调整大小outerDiv

.isStore 是div的CSS类,我要使其可拖动和可调整大小。

$(".outerDiv .isStore").draggable({ containment: ".outerDiv" }).resizable({ containment: ".outerDiv" }); 

问题是我无法将尺寸调整divOuterDiv

在上面的快照中,divwith网格是outerDivand红色表示div可以拖动和调整大小,但这是我可以调整的最大大小。我希望它在整个范围内调整大小outerDiv

我正在使用的CSS是

.outerDiv
 {
   width: 202px;
   overflow:auto;
   overflow: auto;
   display:inline-block;
 }

.isStore
 {
   height: 10px;
   width: 10px;
   background-color: #fff7f8;
   border: 1px SOLID;
   float: left;
   position:absolute;
 }

有什么我想念的吗?

没必要

您可能要使用浏览器的开发人员工具来确定是否定义了一些约束(例如CSS max-height/max-width也许?)。如果您使用的是Chrome浏览器,则可以右键单击该元素,然后查看“样式/计算”标签,以查看可能要使用的内容。解决此类问题时,它有助于简化示例并逐步增加复杂性。

这个简单的示例可以正常工作(没有CSSmax约束):

$(".outerDiv .isStore").draggable({ containment: ".outerDiv" }).resizable({ containment: ".outerDiv" });
.isStore
{
  width: 20px;
  height: 20px;
  background-color: red;
  }
.outerDiv
{
  width: 160px;
  height: 160px;
  background-color: #ccc;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class='outerDiv'><div class='isStore'></div></div>

这通过添加CSSmax-heightmax-width约束来模拟您的问题

$(".outerDiv .isStore").draggable({ containment: ".outerDiv" }).resizable({ containment: ".outerDiv" });
.isStore
{
  width: 20px;
  height: 20px;
  background-color: red;
  max-height: 100px;
  max-width: 100px;
  }
.outerDiv
{
  width: 160px;
  height: 160px;
  background-color: #ccc;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class='outerDiv'><div class='isStore'></div></div>

您可以尝试将这些样式设置为auto如下所示:

.isStore
{
  width: 20px;
  height: 20px;
  background-color: red;
  max-height: auto;
  max-width: auto;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

具有可调整大小/可拖动元素的响应式jQuery UI

来自分类Dev

jQuery可调整大小的可拖动闪烁,用于CSS3转换

来自分类Dev

jQuery UI可拖动+可调整大小的包含问题

来自分类Dev

在Java中绘制形状对象(可拖动,可调整大小并可以旋转)

来自分类Dev

新的xCode 6 Simulator上的可调整大小的iPhone和可调整大小的iPad是什么?

来自分类Dev

可调整大小的可移动矩形

来自分类Dev

使用内部滚动条创建可拖动的,可调整大小的div容器

来自分类Dev

jQuery UI在父容器中的可拖动和可调整大小的div中出现z-Index问题

来自分类Dev

拖放后可拖动和可调整大小

来自分类Dev

jQuery UI同时使用可调整大小和可拖动

来自分类Dev

jQuery可调整大小的奇怪行为

来自分类Dev

Angular 8中可拖动和可调整大小的垫对话框

来自分类Dev

具有角度的可拖动和可调整大小的div

来自分类Dev

可调整鼠标大小的可拖动小部件

来自分类Dev

jQuery UI菜单和可调整大小-重叠

来自分类Dev

jQuery UI可调整大小和可拖动的问题

来自分类Dev

ExtJS 4.2可调整大小的可拖动组件

来自分类Dev

可调整大小的容器中可拖动元素的收容问题

来自分类Dev

使用WPF在Canvas上的用户可调整大小和用户可旋转形状

来自分类Dev

Javascript Grid UI-可拖动和可调整大小

来自分类Dev

可拖动和可调整大小的DIV不起作用

来自分类Dev

jQuery可调整大小和可拖动无法同时工作

来自分类Dev

jQuery可调整大小的更改css

来自分类Dev

jQuery可拖动和可调整大小在动态生成的元素中无法一起使用

来自分类Dev

如何获得可拖动和可调整大小的图像以及仅可调整div的图像?

来自分类Dev

具有z-index的可拖动,可调整大小的div

来自分类Dev

jQuery / Javascript可拖动和可调整大小不适用于div克隆

来自分类Dev

如何使用可调整大小的jQuery在x和y轴上以正确的比例调整图像大小

来自分类Dev

div中可调整大小和可拖动的图像

Related 相关文章

  1. 1

    具有可调整大小/可拖动元素的响应式jQuery UI

  2. 2

    jQuery可调整大小的可拖动闪烁,用于CSS3转换

  3. 3

    jQuery UI可拖动+可调整大小的包含问题

  4. 4

    在Java中绘制形状对象(可拖动,可调整大小并可以旋转)

  5. 5

    新的xCode 6 Simulator上的可调整大小的iPhone和可调整大小的iPad是什么?

  6. 6

    可调整大小的可移动矩形

  7. 7

    使用内部滚动条创建可拖动的,可调整大小的div容器

  8. 8

    jQuery UI在父容器中的可拖动和可调整大小的div中出现z-Index问题

  9. 9

    拖放后可拖动和可调整大小

  10. 10

    jQuery UI同时使用可调整大小和可拖动

  11. 11

    jQuery可调整大小的奇怪行为

  12. 12

    Angular 8中可拖动和可调整大小的垫对话框

  13. 13

    具有角度的可拖动和可调整大小的div

  14. 14

    可调整鼠标大小的可拖动小部件

  15. 15

    jQuery UI菜单和可调整大小-重叠

  16. 16

    jQuery UI可调整大小和可拖动的问题

  17. 17

    ExtJS 4.2可调整大小的可拖动组件

  18. 18

    可调整大小的容器中可拖动元素的收容问题

  19. 19

    使用WPF在Canvas上的用户可调整大小和用户可旋转形状

  20. 20

    Javascript Grid UI-可拖动和可调整大小

  21. 21

    可拖动和可调整大小的DIV不起作用

  22. 22

    jQuery可调整大小和可拖动无法同时工作

  23. 23

    jQuery可调整大小的更改css

  24. 24

    jQuery可拖动和可调整大小在动态生成的元素中无法一起使用

  25. 25

    如何获得可拖动和可调整大小的图像以及仅可调整div的图像?

  26. 26

    具有z-index的可拖动,可调整大小的div

  27. 27

    jQuery / Javascript可拖动和可调整大小不适用于div克隆

  28. 28

    如何使用可调整大小的jQuery在x和y轴上以正确的比例调整图像大小

  29. 29

    div中可调整大小和可拖动的图像

热门标签

归档