|
|
|
|
@ -2,6 +2,20 @@
|
|
|
|
|
<%@ include file="/WEB-INF/jsp/framework/taglibs.jsp" %>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
div.draggable {
|
|
|
|
|
float: left;
|
|
|
|
|
padding: 10px 0 0 20px;
|
|
|
|
|
width: 160px;
|
|
|
|
|
height: 160px;
|
|
|
|
|
background:url(/resources/framework/images/common/clip.png) no-repeat 0 0; */
|
|
|
|
|
/*border: 1px solid red;*/
|
|
|
|
|
}
|
|
|
|
|
div.invert {
|
|
|
|
|
background:url(/resources/framework/images/common/clip.png) no-repeat 0 0; */
|
|
|
|
|
/*border: 1px solid red;*/
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<c:set var="bizName" value="주민 신고 데이타"/>
|
|
|
|
|
|
|
|
|
|
@ -203,8 +217,28 @@
|
|
|
|
|
</c:forEach>
|
|
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="draggable">
|
|
|
|
|
<p>title</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="draggable">
|
|
|
|
|
<p>
|
|
|
|
|
Lorem ipsum dolor<br>
|
|
|
|
|
sit amet, consecte<br>turlit.
|
|
|
|
|
Aenean
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="draggable">
|
|
|
|
|
<p>Drag me around</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<%-- TODO: id 고정(변경불가)--%>
|
|
|
|
|
<div id="imgList" style="display: flex; flex-direction: column; align-items: center"></div>
|
|
|
|
|
<div class="draggable" id="imgList" style="display: flex; flex-direction: column; align-items: center"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div style="min-height: 260px">
|
|
|
|
|
<img id="uploadImage"/>
|
|
|
|
|
@ -295,6 +329,43 @@
|
|
|
|
|
$(document).ready(function () {
|
|
|
|
|
// orgData = $('form').serialize();
|
|
|
|
|
fnBiz.downloadImg();
|
|
|
|
|
// $( '#imgList' ).draggable({
|
|
|
|
|
// scroll : false,
|
|
|
|
|
// containment : 'parent', //부모 요소 안에서만 이동 범위 제한
|
|
|
|
|
// handle : '.header' // drag 대상 안 특정 요소에 제한 (여러개 사용 가능)
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
//$( "#imgList" ).draggable({ revert: true });
|
|
|
|
|
//$( "#imgList" ).draggable({ revert: true, helper: "clone" });
|
|
|
|
|
|
|
|
|
|
$(".draggable").draggable({
|
|
|
|
|
cursor:"move",
|
|
|
|
|
stack:".draggable",
|
|
|
|
|
opacity:0.7,
|
|
|
|
|
create : function(event, ui) { //생성시 발생하는 이벤트
|
|
|
|
|
console.log("dragcreat event!");
|
|
|
|
|
console.log("index:"+$(this).index());
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
$(".draggable").bind("dragcreat", function(event, ui) {
|
|
|
|
|
console.log("dragcreat event!");
|
|
|
|
|
});
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
$(".draggable").bind("dragstart", function(event, ui) {
|
|
|
|
|
console.log("dragstart event!");
|
|
|
|
|
$(this).addClass("invert"); //클래스 추가
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
$(".draggable").bind("dragstop", function(event, ui) {
|
|
|
|
|
console.log("dragstop event!");
|
|
|
|
|
$(this).removeClass("invert"); //클래스 제거
|
|
|
|
|
});
|
|
|
|
|
$(".draggable").bind("drag", function(event, ui) {
|
|
|
|
|
console.log("drags event!");
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
