如何使用jquery将可丢弃的div图像保存到pc [英] how to save droppable div image in to pc using jquery
本文介绍了如何使用jquery将可丢弃的div图像保存到pc的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的问题如何将可丢弃的div图像保存到本地存储中，例如在绘图中保存图像的绘图应用程序中我们必须打开该图像以再次编辑该图像，保存div后必须打开空以创建另一个图像。
我已经做到这里，但是没有得到保存功能谷歌的功能2天这个我无法得到它
任何人都可以帮我这个谢谢提前。
My question how to save droppable div image in to local storage like in paint app saving image in pc and we have to open that image to edit that image again save after save the div has to open empty to create one more image.
I have done till here,but didn''t get functionality of save function google for 2 days for this im unable to get it
Can anyone help me in this thanks in advance.
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="../../Scripts/mootools-core-1.4.5-full-compat.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript" >
google.load("jquery", "1.6.3");
google.load("jqueryui", "1.8.16");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<style type="text/css">
.col{
float:left;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
#col1{
width:200px;
height:200px;
border:1px solid black;
}
.drag{
width:50px;
background:url(../../Content/themes/base/images/Design22.png);
background-repeat:no-repeat;
background-size:100% Auto;
height:50px;
}
.drag1{
width:50px;
background:url(../../Content/themes/base/images/Design23.png);
background-repeat:no-repeat;
background-size:100% Auto;
height:50px;
}
.drag2{
width:50px;
background:url(../../Content/themes/base/images/Design24.png);
background-repeat:no-repeat;
background-size:100% Auto;
height:50px;
}
#droppable{
width:1000px;
height :300px;
border:1px solid black;
}
#save
{
display:inline;
width:auto;
height:auto;
border:0px solid black;
}
</style>
</head>
<body>
<div class = "col" id="col1">
<div id="drag1" class="drag" ></div>
<div id="drag2" class="drag1"></div>
<div id="drag3" class="drag2"></div>
</div>
<div class="col" id ="droppable"></div>
<div id="save">
<input type="button" value="SAVE"/>
</div>
</body>
</html>
<script type="text/javascript">
debugger;
$(document).ready(function () {
var x = null;
var y = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'
});
$(".drag1").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'
});
$(".drag2").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'
});
$("#droppable").droppable({
drop: function (e, ui) {
if ($(ui.draggable)[0].id !== "") {
x = ui.helper.clone();
ui.helper.remove();
x.draggable({
helper: 'original',
containment: '#droppable',
tolerance: 'fit'
});
x.resizable({
minHeight: 40,
maxHeight: 1000,
minWidth: 50,
maxWidth: 1000
});
x.appendTo('#droppable');
}
}
});
$("#save").click(function () {
alert("Saved");
});
});
</script>
推荐答案
（ document ).ready( function （）{
var x = null ;
var y = null ;
// 使元素可拖动
(document).ready(function () { var x = null; var y = null; //Make element draggable
（ 。drag）。draggable（{
helper：' clone'，
cursor：' move'，
tolerance：' fit'
}）;
(".drag").draggable({ helper: 'clone', cursor: 'move', tolerance: 'fit' });
（。drag1）。draggable（{
helper：' clone'，
cursor：' move'，
容差：' fit'
}）;
(".drag1").draggable({ helper: 'clone', cursor: 'move', tolerance: 'fit' });
这篇关于如何使用jquery将可丢弃的div图像保存到pc的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
