jquery - Jquery ui拖放+ .resizable
问题描述
我想补充.resizable()
一点:https ://jsfiddle.net/6aneLqu5/23/
这就是问题所在。我可以将图像拖到容器中。但不会像上面的 jsfiddle.net 演示那样改变。为了更好地理解,我附上了一个具有可调整大小功能的 jsfiddle。http://jsfiddle.net/wJUHF/7/
解决方案
考虑以下。
$(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>
这利用length
了 jQuery 对象的属性来提供项目的计数。
由于用户可以删除项目,因此可能会出现 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。
推荐阅读
- c# - DIA SDK 抛出 NotImplementedException
- angular - 使用 Angular 7 Material CDK 拖放
- r - 将逆伽马分布拟合到 R 中的数据
- flutter - 为什么我要删除 build/ 目录?
- sitecore - Sitecore 9.0.2 访问 URL 时的 Windows 身份验证
- c# - 检查文件或文件夹是否“始终可用脱机”?
- mysql - 如何在 Spring Boot 应用程序中通过 ssh 隧道连接到远程 mysql
- nlp - 如何评估使用 Rouge 指标的黄金摘要生成的自动摘要?
- php - 纯 PHP 中的 Laravel DB 表模型实现
- amazon-web-services - 尝试通过 AWS 应用程序负载均衡器和 Cognito 进行身份验证时出现 500 错误