[Solved] how to save droppable div image in to pc using jquery

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>

geethika amu - 2 Jan '13 - 22:19

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 - 2 Jan '13 - 22:22

Read my answer again. The only place you can save things, is on your server, for users who log in.

geethika amu - 2 Jan '13 - 22:28

got it sir thanks can u tel me how to save in server the above code will work for it

Christian Graus - 2 Jan '13 - 22:29

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 - 2 Jan '13 - 22:36

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 - 2 Jan '13 - 22:37

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 - 2 Jan '13 - 22:42

im using html5 and jquery for this

Christian Graus - 2 Jan '13 - 22:47

Fine then.

Christian Graus - 2 Jan '13 - 22:55

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 - 2 Jan '13 - 22:59

yes kind of like that its jst sample to show

Christian Graus - 2 Jan '13 - 23:14

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

0	OriginalGriff	343
1	Sergey Alexandrovich Kryukov	143
2	Mohammed Hameed	123
3	Santhosh G_	113
4	Ron Beyer	64

0	Sergey Alexandrovich Kryukov	8,266
1	OriginalGriff	6,516
2	CPallini	3,533
3	Rohan Leuva	2,703
4	Maciej Los	2,234

how to save droppable div image in to pc using jquery

1 solution

Solution 1

Add your solution here

Preview 0

		9,879,344 members (30,412 online) Visit CodeProject.TV Discuss CodeProject.TV Sign in Email Password Forgot your password? Sign in using

Interested
Ignored

how to save droppable div image in to pc using jquery

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us