CODEWITHSUNDEEP
c#asp.netjquery
Vani
Vani

Reputation: 101

How to save position of dragged items

HI, I want to save the position of dropped items to database[aspx,javascript]. The user can drop any number of item,resize and delete[hide] and finally when they hit 'save' button ,it should be saved to database. I have code to do this in drop /stop but it will save all the dropped items i want to save only at final stage. I guess lot of developer should have already done this,so please suggest some code.

  $(function() {
      $('#frame img').live('mousemove', function(event) {
          $('#frame img').resizable().parent().draggable();
      });
  });


  $(function() {
      $('#frame img').live('dblclick', function(event) {
          // $(this).resizable("destroy")  not working
          $(this).hide();
          //$(this).unbind("resizable"); not working
          //$(this).removeclass(); not working
      });
  });

  $(document).ready(function() {
      //Counter
      counter = 0;

      //Make element draggable
      $("img").draggable({
          helper: 'clone',
          containment: '#frame',

          //When first dragged
          stop: function(ev, ui) {
              var pos = $(ui.helper).offset();
              objName = "#clonediv" + counter
              $(objName).css({ "left": pos.left, "top": pos.top });

              $(objName).removeClass("drag");
              //When an existiung object is dragged
              $(objName).draggable({
                  containment: 'parent',
                  stop: function(ev, ui) {
                      var pos = $(ui.helper).offset();
                  }
              });
          }
      });

      //Make element droppable
      $("#frame").droppable({

          drop: function(ev, ui) {

              if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
                  var pos = $(ui.helper).offset();

                  counter++;
                  var element = $(ui.helper).clone();

                  //var element = element1.resizable();
                  element.addClass("tempclass");
                  $(this).append(element);
                  $(".tempclass").attr("id", "clonediv" + counter);
                  //$(".tempclass").attr("onclick",function(){ $(this).remove(););
                  $("#clonediv" + counter).removeClass("tempclass");
                  //Get the dynamically item id
                  draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
                  itemDragged = "dragged" + RegExp.$1
                  //console.log(itemDragged)
                  //alert('left' + pos.left + ',top' + pos.top + 'of item' + itemDragged);
                  $("#clonediv" + counter).addClass(itemDragged);
              }
          }
      });
      //Make the element resizable


  });

Please correct me,if anything is wrong. Thanks in advance

Upvotes: 10

Views: 2431

Answers (6)

Dave L
Dave L

Reputation: 984

So you don't want to save them till the end?

You're adding the clone to #frame on drop, at this point give it a class to indicate its a dropped item. I'd put a reference to the intial object in the 'ref' attr, instead of as a class.

Droppable

$("#frame").droppable({
    drop: function(ev, ui) {

        if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
            var pos = $(ui.helper).offset();

            counter++;
            var element = $(ui.helper).clone();

            $(this).append(element);
            element.attr("id", "clonediv" + counter);

            // Get the dynamic item id
            draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
            itemDragged = "dragged" + RegExp.$1

            element.attr('ref', itemDragged);
        }
    }
});

The click method should be similar to (assuming a single post to save all the dropped items (x,y,width,height,original object id)):

OnClick

$("#saveDrops").click(function () {
    var dObjects = [];
    $.each('#frame .droppedClass', function(i) {
        dObjects[i] = {
            x: $(this).offset().left,
            y: $(this).offset().top,
            height: $(this).width(),
            width: $(this).height(),
            identifier: $(this).attr('ref');
        }
    });

    $.post('savemystuff.aspx', dObjects, function(data){
        // Do something with the results
    });
});

Upvotes: 0

user281693
user281693

Reputation: 635

I once did this for one of my class projects. Since I had only one week time to implement, it was not really a good implementation. The way I did was whenever the user drags and drops, I got the final x.location and y.location from javascript and call asmx web service where I will send (x,y). In the asmx file I wrote the code to save it in database.

Upvotes: 0

zod
zod

Reputation: 12417

Try to use mouse position

http://docs.jquery.com/Tutorials:Mouse_Position

Upvotes: 0

Justice Erolin
Justice Erolin

Reputation: 2879

Based on your response to the question above:

" I want to save the images in div2 to database. Please see the above code"

It seems that all you need to do is on stop, get the child elements of div2.

jQuery would be...

var x = "";
$("#div2").children("img").each(function(){
  x = x + "; " + $(this).attr("src");
});

this would return an semicolon delimited string of all the img srcs in div2.

Upvotes: 0

alex
alex

Reputation: 490153

Assuming your elements are list items under a list with an id of items.

jQuery

var locations = [];

$('#items li').each(function(i) {

    locations[i] = {
        x: $(this).offset().left,
        y: $(this).offset().top
    };

});

Then post this to your server side. Without knowing more specifics, I can't be 100% sure if this is all that is required.

On page load, simply loop through the locations and add an attribute to your li such as (assuming PHP)

HTML/PHP

<ul id="items">
<?php foreach($items as $item): ?>
<li style="left: <?php echo $item['x']; ?>px; top: <?php echo $item['x']; ?>px">item</li>
<?php endforeach; ?>
</ul>

of course you may also need to do

CSS

#items {
    position: relative;
}

#items li {
    position: absolute;
}

Upvotes: 2

griegs
griegs

Reputation: 22760

One way might be to place the co-ordinates, on drag stop, into a hidden field that you can then read in the code behind and store in the db.

When you re-render the page, you would also need to fill the field and use javascript to place the objects back in their places.

Also, it might be handy to mention what code behind language you are using. C#, PHP, Java, What?

Upvotes: 0

Related Questions