0

i'm Italian and i'm sorry form my english... I'm a new "web developer"...I have built a drag and drop page with jquery. I'd like to add a button that enable/disable the jquery script (i.e. the possibility to do drag and drop). Moreover I'd like to save the dom modification so that the user sees the last modification at each subsequent access. Hope i'm clear in my explanation. Thanks in advance.

here my js script:

var sourceElement;
var transferred = false;

   $("#sortable li").draggable({
        helper: 'clone',
        revert: 'invalid',
        cursor: 'move',
        connectToSortable: "#panchina",
        start: function (event, ui) {
            $(this).hide();
            sourceElement = $(this).text().toString();                
        },
        stop: function (event, ui) {
            if(!transferred)
            $(this).show();
        else
        {
            $(this).remove();
            transferred = false;
        }

        }
    });

$("#panchina li").sortable({
     receive: function(event, ui)
    {
        transferred = true;
    }

    });


 $("#sortable, #panchina li, .bg-success, .bg-info, .bg-warning, .bg-danger").droppable({
            drop: function (event, ui) {
            $(ui.draggable).appendTo(this);
        }
    });


$("#save").click(function() {
// empty string to save the result
/*var dataList = "";*/
var dataList= new Array();
var panchina= new Array();
// find all li elements within the element with the id list
var $entries = $("#433").find('li');
var $panchinari =$('#panchina').find('li');

$entries.each(function(i, entry) { 
         dataList[i] = $(entry).text().toString();
                              });
$panchinari.each(function(i, entry) { 
   panchina[i] = $(entry).text().toString();
                            });
          });
Pierpaolo Croce
  • 57
  • 2
  • 14
  • 1
    To enable and disable drag-and-drop, see [this post](https://stackoverflow.com/questions/1324044/how-do-i-disable-a-jquery-ui-draggable). To save DOM modifications you will need to recreate the DOM on every page load using cookies to track those modifications. – Maximillian Laumeister Aug 04 '15 at 18:19
  • Can you suggest me an exsample on how save the DOM with cookies? – Pierpaolo Croce Aug 05 '15 at 08:52
  • The idea would be to save something like "element1 = visible" to a cookie when the user toggles something. Then when the page loads again, check the cookie and if the cookie contains "element1 = visible" then show the DOM element. – Maximillian Laumeister Aug 05 '15 at 16:58
  • Ok, thanks .. I thought an alternative solution: directly UPDATE the database at every DOM modification and then load the updated DOM at the following access. May be this a solution? – Pierpaolo Croce Aug 05 '15 at 17:48

0 Answers0