Draggable and Droppable Issue

Draggable and Droppable Issue

When I drag a span ID that is eseentially just Text it cuts off at the first space. The text value is saved in the database correctly because when I save the page and come back to it the full description is there.

So for example, "Rat Roost" drags and drops nicely in another selection box but it drops as "Rat"

When dragging the span id outside of the selection box the words seem to pile on top of each other so if it was multiple words like "Dog and Cat Treats" it rearranges as I drag it out to say

Dog
and
Cat
Treats

so I'm not sure if that has something to do with it. Below is the code that adds the key and description to the span items and also sets 3 multi select boxes to be droppable.






$(p2).find("Linked").each(function() {
                  var item_code = $(this).attr("code");
                  var item_desc = $(this).attr("text");
                 
                //  $('SELECT[name=\'rec_testmulti\']').addOption(item_code, item_desc); //We were using this but cannot drag from selection box because it needs a span id
      
      $("#container").append("<SPAN ID='test' key="+item_code+" desc="+item_desc+" style='font-family: tahoma, ariel; font-size: 11px; font-weight: normal; color: black;'>"+item_desc+"</SPAN><br></br>");
            
                });

      $("SPAN[id='test']").draggable({helper: 'clone', scroll: false});
      
      //This code below makes the destination box droppable and puts the key and desc in
      $('SELECT[name=\'rec_testdrag\']').droppable({tolerance: 'pointer',
               drop: function(ev, ui) { $(this).addOption($(ui.draggable).attr("key"), $(ui.draggable).attr("desc"));  }
                      });
                      
    $('SELECT[name=\'rec_testverballyordered\']').droppable({tolerance: 'pointer',
               drop: function(ev, ui) { $(this).addOption($(ui.draggable).attr("key"), $(ui.draggable).attr("desc")); }
                      });
                      
    $('SELECT[name=\'rec_testordered\']').droppable({tolerance: 'pointer',
               drop: function(ev, ui) { $(this).addOption($(ui.draggable).attr("key"), $(ui.draggable).attr("desc")); }
                      });