问题描述
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="style/result.css?v=1.3" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<%@ page import = "java.io.*" %>
<style>
html,body{
width:100%;
min-width:200px;
height:100%;
}
div {
width: 100%;
height: 100%;
border: 1px solid #000;
}
ul,li{
list-style:none;
margin:0;
padding:0;
}
img {
font-size:0;
line-height:0;
}
img.menu {
font-size:0;
line-height:0;
width:90px;
height:90px;
cursor:pointer;
}
.right_div{
width: 90px;
height: auto;
float:right;
}
.center_div{
width: 500px;
height: 100%;
float:right;
right:90px;
}
.right_top{
height: 90px;
}
.center_top{
height: 90px;
}
.middle{
top: 90px;
height: auto;
}
.center_number,.center_alphabet,.center_korean {
width: 500px;
height: 100%;
float:right;
Box-sizing: border-Box;
background: #ffffff;
}
#dropHere{
width: Calc(100% - 500px - 90px);
height: 100%;
left:10px;
background-color: skyblue;
border: dotted 1px black;}
.default_top {
width: Calc(100% - 500px - 90px);
height: 90px;
left:10px;
Box-sizing: border-Box;
background: #ffffff;
}
</style>
<script type="text/javaScript" >
$(function(){
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all",autoHide:true};
$(".dragImg").draggable({
helper: "clone",//Create counter
start: function() { counts[0]++; }
});
$("#dropHere").droppable({
drop: function(e,ui){
if(ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
$("#dropHere .dragImg").addClass("item-"+counts[0]);
$("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");
$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});
$(".item-"+counts[0]).draggable().resizable();
}
}
});
var zIndex = 0;
function make_draggable(elements)
{
elements.draggable({
containment:'parent',start:function(e,ui){ ui.helper.css('z-index',++zIndex); },stop:function(e,ui){
}
});
}
});
</script>
<html>
<head>
<title>Graphic maker</title>
</head>
<body>
<div class="right_div">
<div class="right_top">
<ul>
<li><img src="image/test.PNG" width="90" height="90"></li>
</ul>
</div>
<div class="middle">
<ul>
<li><img class="menu" src="image/app_icon.PNG" title="number"></li>
</ul>
</div>
</div>
<div class="center_div">
<div class="center_top">
<input type="text" style="font-size:15pt; text-align:center; width:494px; height:85px;"> </div>
<div class="middle">
<div class="center_number">
<%
File path_number=new File("D://image//number");
File[] fileList_number=path_number.listFiles();
if(fileList_number.length>0){
for(int i=0;i<fileList_number.length;i++){
String name=fileList_number[i].toString().substring(fileList_number[i].toString().lastIndexOf("\\")+1);
String fullname="image/number/"+fileList_number[i].toString().substring(fileList_number[i].toString().lastIndexOf("\\")+1);
%>
<img src=<%=fullname%> class="dragImg"
title=<%=name%>
width="90" height="90" >
<%
}
}
%>
</div>
</div>
</div>
<div class="default_top">
<script src="js/test.js" >
</script>
<h1>aaa</h1>
</div>
<div id="dropHere" ></div>
</body>
</html>
顶部是脚本部分，中间是jsp和Java代码，底部定义了一个叫做dropHere的div。在 jsp 实现部分，在获取返回循环的多个图像之一并将其放置在 dropHere 上之后，您希望再次使放置的图像可拖动或调整大小。
但只有调整大小才有效。就我而言，我将其拖放到 dropHere 区域并添加该类。在这种情况下，如何将其添加为 div？
或者有其他方法吗？
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）