2

i want to save the droppable positions to a database. Within each droppable div ive added a text input field with the div name with a 'i_' prefix.

If i put an alert in the code to show the dropped object, the id is correct in the alert box and appears in the text input field. But when i click the OK , it disappears.

<div style="float:left; border-style:solid;">
<div class="draggable" class="ui-widget-content" id="1059" style="left:0px; top:0px;"    >john doe</div>
<div class="draggable" class="ui-widget-content" id="1113" style="left:0px; top:0px;"    >jane doe</div>

<div   style="float:left;  vertical-align:top"  class="droppable ui-widget-header" id="1-2">
<input type='text' id='i_1-2'  name='i_1-2' value=''><p>1-2</p></div>

<div style="clear:both";></div> <div style="float:left; vertical-align:top" class="droppable ui-widget-header" id="2-1">
<input type='text' id='i_2-1'  name='i_2-1' value=''>
<p>2-1</p></div>

if the function that is called is this, the text box goes yellow , but the value isnt set 

drop: function(event, ui )
                 {
            var f=ui.draggable.attr("id");alert(f);
            var s = 'i_'+$(this).attr("id");//alert(s);

              $('#'+s).css({'background-color' : 'yellow'});
              $('#'+s).val(f);

                }

what am i doing wrong ?

    $( ".droppable" ).droppable
        ({
        activeClass: "ui-state-hover",hoverClass: "ui-state-active",
        drop: function( event, ui )
             {
        var f=ui.draggable.attr("id");//alert(f);
        var s = 'i_'+$(this).attr("id");
document.getElementById(s).value=f;//alert(document.getElementById(s).value);

            }

} );
user358360
  • 199
  • 1
  • 1
  • 11
  • Please show your html, otherwise, we can only guess what's wrong. – Dom Nov 25 '12 at 23:33
  • the drop function is now this. The text box goes yellow , but the value is not set – user358360 Dec 01 '12 at 09:55
  • ive edited ( does it save changes automatically ?). Drag the name into the target box and the id number appears in the text box. works in the jsfiddle. Doesn't work on my machine in either FF or chrome or IE ( win7 starter) – user358360 Dec 02 '12 at 13:20
  • in the browser, it stores the id in the text input if the id is surrounded with quotes ie "100" rather than 100. No other value to text manipulation gives a string or value that is stored – user358360 Dec 04 '12 at 11:23
  • Did you make `$(".draggable").draggable();`? http://jsfiddle.net/93RGW/53/ – Dom Dec 04 '12 at 15:13
  • Ive added the revert function .If the draggable is removed from the droppable, i want the text input field to revert to blank. Im having difficulty with code (?within draggable function) that identifies which text box I should be setting to '' – user358360 Dec 07 '12 at 14:00
  • cant get the jsfiddle to save the additions.Within the draggable is this function http://stackoverflow.com/questions/5735270/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-event-of. I need to identify when the draggable reverts so i can then find the input fiedl it came from and clear it – user358360 Dec 09 '12 at 19:38
  • this should help you out. http://stackoverflow.com/questions/1853230/jquery-ui-draggable-event-status-on-revert – Dom Dec 09 '12 at 21:08
  • heres the latest - i can identify when the draggable is dropped in/out of a droppable. I now need to find the input box with the mtching text and delete it. My loop isnt working :-( http://jsfiddle.net/medalto/hLQ94/34/ – user358360 Dec 13 '12 at 21:05

0 Answers0