views:

196

answers:

1

Hi All,

I have a problem that i want to make an element draggable and resizable both. Even after dropping the tag it should be resizable.

Some Sample Code

function  DivMouseDown(id)
{
  try {
    jQuery('#'+ id).draggable({
    opacity: 0.5,
    revert: 'invalid'
    });
  } catch (e) {
    alert ("exception in DIVmouse down: "+ e);
  }

  try {
    jQuery('#droppable').droppable({
      drop: function(ev,ui) {
        var type = jQuery(ui.draggable).attr("tagtype");
        id = jQuery(ui.draggable).attr("id");
        if(document.getElementById(id) != null) {
          var tagStatus = document.getElementById(id).getAttribute('newtag');
          var idTemp = Math.floor(Math.random()*1000); 

          if(tagStatus == 'new')
          {
            //Create new div at the same place and replace this tag status.
            var divId = document.getElementById(id);
            divId.setAttribute('newtag','old'); 
            divId.setAttribute('id',idTemp);
            CreateWorkboardDiv('html comment', type); 
            jsmarty = WMCreateSmartyObject();
            divValue = WMSmartyFetch(jsmarty, 'edit_menu.tpl');
            document.getElementById(divId.id).innerHTML = divValue;
            jsmarty.clear_all_assign();
            //Open Edit box.
            CollabobaTagCreate(divId.id,type,0);    
          }
          else
          {
            //drag on board  div.
            //Nishima-10-09-09
            var position = new Array();
            position['left'] =  document.getElementById(id).offsetParent.offsetLeft + document.getElementById(id).offsetLeft;
            position['top']   = document.getElementById(id).offsetParent.offsetTop + document.getElementById(id).offsetTop;
            position['width'] =  document.getElementById(id).offsetWidth;
            position['height'] =  document.getElementById(id).offsetHeight;
            position['zindex'] =  jQuery('#' + id).css('zIndex');
            var stickyid = document.getElementById(id).getAttribute('stickyId');  
            UpdateStickyPosition(position,stickyid);
            //Nishima-10-09-09
          }
        }
      }
    });
  }
  catch (e)
  {
    alert ("exception in DIVmouse down: "+ e);
  }
}

Can anyone tell me how I can make my element reziable after it is dropped. In the above code tag, dragging and dropping works perfectly, but what can I add to make the element resizable also in CHROME.

Thanks

A: 

Look at this question : Custom Resizable Handles in JQuery UI

Clement Herreman