Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS jQuery HTML5
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>
Posted 2-Jan-13 1:25am
Edited 2-Jan-13 2:13am
DaveAuld177.6K
v2

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Javascript does not let you save files to the local file system
  Permalink  
Comments
geethika amu at 2-Jan-13 22:19pm
   
than q for Ur reply sir, can we store in local storage or any other place
if I use canvas means drag drop re sizable will won't work is there any solution how to execute
Christian Graus at 2-Jan-13 22:22pm
   
Read my answer again. The only place you can save things, is on your server, for users who log in.
geethika amu at 2-Jan-13 22:28pm
   
got it sir thanks can u tel me how to save in server the above code will work for it
Christian Graus at 2-Jan-13 22:29pm
   
I guess the question is, where is the image coming from, if not the server ? Isn't it already there ? You can't send an image from the client to the server in javascript. The browser is showing an image from somewhere - where did it come from ?
geethika amu at 2-Jan-13 22:36pm
   
actually its a design which we have created using canvas & save it in pc after that we wrote code for drag,drop and resizable from one div to another div now we want to drag diff designs in to one div and make it as image like overlapping
i hope you understand wat i want to say
Christian Graus at 2-Jan-13 22:37pm
   
If you're creating it from HTML elements, you need to send that HTML to the server as a string, and reinstate it again later to recreate it. You can use jquery to get the html as a child of it's immediate parent node.
geethika amu at 2-Jan-13 22:42pm
   
im using html5 and jquery for this
Christian Graus at 2-Jan-13 22:47pm
   
Fine then.
Christian Graus at 2-Jan-13 22:55pm
   
Looks like you want to grab everything below #droppable and send it to the server to store, probably via AJAX. It looks simple enough to me.
geethika amu at 2-Jan-13 22:59pm
   
yes kind of like that its jst sample to show
Christian Graus at 2-Jan-13 23:14pm
   
The moment eventually comes where you have to write your own code... I could only guess at a copy and paste solution, and it should not be hard for you to write one

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web04 | 2.8.1411022.1 | Last Updated 2 Jan 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100