Jquery ui拖放+ .resizable
Posted
技术标签:
【中文标题】Jquery ui拖放+ .resizable【英文标题】:Jquery ui drag and drop + .resizable 【发布时间】:2021-07-21 18:07:23 【问题描述】:我想在此添加.resizable()
:https://jsfiddle.net/6aneLqu5/23/
这就是问题所在。我可以将图像拖到容器中。但不会像上面的 jsfiddle.net 演示那样改变。为了更好地理解,我附上了一个具有可调整大小功能的 jsfiddle。 http://jsfiddle.net/wJUHF/7/
【问题讨论】:
不清楚为什么要将数组分配给counts
。我建议您改为将 Int 0
分配给 counts
。
【参考方案1】:
考虑以下内容。
$(function()
var resizeOpts =
handles: "all",
autoHide: true,
;
function make_draggable(el, params)
return $(el).draggable(params);
make_draggable(".dragImg",
helper: "clone"
);
$("#dropHere").droppable(
accept: ".dragImg",
drop: function(e, ui)
var dropItem = $(ui.helper).clone();
$(this).append(dropItem);
var newCount = $(".img", this).length;
dropItem.addClass("item-" + newCount);
$("img", dropItem).addClass("imgSize-" + newCount);
dropItem.removeClass("dragImg ui-draggable ui-draggable-dragging");
dropItem.dblclick(function()
$(this).remove();
);
make_draggable(dropItem,
containment: "parent"
);
$("img", dropItem).resizable(resizeOpts);
,
);
);
#dropHere
width: 400px;
height: 400px;
border: dotted 1px black;
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="dragImg"><img class="img" src="http://www.thumbshots.com/Portals/0/Images/Feature%20TS%201.jpg" /></div>
<div id="dropHere"></div>
这利用了 jQuery 对象的 length
属性来提供项目的计数。
由于用户可以删除项目,因此可能会发生 ID 冲突。所以也许只使用你的计数器是一个更好的主意。这是与该想法相同的示例。
$(function()
var resizeOpts =
handles: "all",
autoHide: true,
;
var count = 0;
function make_draggable(el, params)
return $(el).draggable(params);
make_draggable(".dragImg",
helper: "clone"
);
$("#dropHere").droppable(
accept: ".dragImg",
drop: function(e, ui)
var dropItem = $(ui.helper).clone();
$(this).append(dropItem);
var newCount = ++count;
dropItem.addClass("item-" + newCount);
$("img", dropItem).replaceWith("<div class='img imgSize-" + newCount + " drag_elm'>Image " + newCount + "</div>");
dropItem.removeClass("dragImg ui-draggable ui-draggable-dragging");
dropItem.dblclick(function()
$(this).remove();
);
make_draggable(dropItem,
containment: "parent"
);
$(".img", dropItem).resizable(resizeOpts);
,
);
);
#dropHere
width: 400px;
height: 400px;
border: dotted 1px black;
.drag_elm
width: 80px;
height: 80px;
background: aqua;
border: 1px solid red;
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="dragImg"><img class="img" src="http://www.thumbshots.com/Portals/0/Images/Feature%20TS%201.jpg" /></div>
<div id="dropHere"></div>
您可以将计数设置为0
或1
。它只是改变了你以后使用它的方式。使用++count
在使用它之前增加它,或者将它分配给另一个变量。 count++
会在使用后递增。
更新
添加到带有.replaceWith()
的第二个片段以将图像更改为一个Div。
【讨论】:
感谢您的回复。请你改进它,所以它会变成一个 div 的图像。就像这样jsfiddle.net/6aneLqu5/23 @youngdero 我不明白你想要完成什么。如果您想用 DIV 元素替换 IMG 元素,我建议您查看.replaceWith()
。
@youngdero 我在第二个 sn-p 中包含了一个示例。以上是关于Jquery ui拖放+ .resizable的主要内容,如果未能解决你的问题,请参考以下文章