Click here to Skip to main content
11,933,854 members (56,234 online)
Rate this:
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.
        <script src="" type="text/javascript"></script>
        <script src="../../Scripts/mootools-core-1.4.5-full-compat.js" type="text/javascript"></script>
        <script src="" type="text/javascript"></script>
        <script type="text/javascript" >
            google.load("jquery", "1.6.3");
            google.load("jqueryui", "1.8.16");
        <link rel="stylesheet" type="text/css" href=""/>
        <style type="text/css">
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
    border:1px solid black;
    background-size:100% Auto;
    background-size:100% Auto;
    background-size:100% Auto;
    height :300px;
    border:1px solid black;
    border:0px solid black;
<div class = "col" id="col1">
<div id="drag1" class="drag" ></div>
<div id="drag2" class="drag1"></div>
<div id="drag3" class="drag2"></div>
<div class="col" id ="droppable"></div>
<div id="save">
<input type="button" value="SAVE"/>
<script type="text/javascript">
    $(document).ready(function () {
        var x = null;
        var y = null;

        //Make element draggable
            helper: 'clone',
            cursor: 'move',
            tolerance: 'fit'
            helper: 'clone',
            cursor: 'move',
            tolerance: 'fit'
            helper: 'clone',
            cursor: 'move',
            tolerance: 'fit'
            drop: function (e, ui) {
                if ($(ui.draggable)[0].id !== "") {
                    x = ui.helper.clone();
                        helper: 'original',
                        containment: '#droppable',
                        tolerance: 'fit'
                        minHeight: 40,
                        maxHeight: 1000,
                        minWidth: 50,
                        maxWidth: 1000
        $("#save").click(function () {
Posted 2-Jan-13 1:25am
Edited 2-Jan-13 2:13am

1 solution

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

Solution 1

Javascript does not let you save files to the local file system
geethika amu 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 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 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 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 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 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 2-Jan-13 22:42pm
im using html5 and jquery for this
Christian Graus 2-Jan-13 22:47pm
Fine then.
Christian Graus 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 2-Jan-13 22:59pm
yes kind of like that its jst sample to show
Christian Graus 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)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web04 | 2.8.151126.1 | Last Updated 2 Jan 2013
Copyright © CodeProject, 1999-2015
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