Using the itemBox api

We have marked a paragraph and an image som when they are clicked the element get draggable and removed from its original position.

Norwegian lorem ipsum:

You can CLICK on this paragraph. The text below is taken from some winedescriptions and have no other meaning here than taking up some space.

Duften minner mest om epler og har et lite streif av gjærbakst. Syrefrisk og harmonisk smak med god fylde, fin syrefasthet i ettersmaken. Duft av modne epler og gjær. Syrlig anslag, deretter streif av honning i smaken. Litt lite nyansert. Aromatisk duft av solbærblader, stikkelsbær, nesle og urter. Smaksrik og lang, med frisk bitterhet i ettersmaken. Rik duft av mineraler, sitrus og toast. Velbalansert og fyldig smak med både syretørrhet og fruktsødme. Kompleks og lang ettersmak med en liten brentkarakter i avslutningen. Brentpreg i duften med toastkarakter. Litt smøraktig sødme og aprikos i smaken, litt tung stil, men avslutningen er overraskende syrlig. Søt og moden duft av rosiner og aprikos. Myk og rund smak med innslag av tørkete frukter og karamellsødme. Bra syrefasthet og en utpreget brentkarakter i ettersmaken. Tung duftsødme av blomster og tropiske frukter. Mektig rosinsmak med stor søthetsgrad, litt lite syre gir en relativt kort ettersmak. Kobbergylden vin med litt overmoden duft. Fyldig og knallsøt smak med rosinkarakter, aprikos og honningsødme. Ettersmaken er ikke så varig som forventet. Brentkarakter og sødme av rosiner og aprikos i duften. Tørkete frukter i smaken, vinen virker litt for oksydert, og har en relativt tørr ettersmak. Rødfiolett farge, og ferskt bærpreg med brent toastkarakter i duften. Bløt og fyldig morellsødme pluss fatpreg i smaken. Avrundet ettersmak, prisgunstig hverdagsvin for nå-konsum.

It is a good idea look at the source
and inspect elements

Copy the content of this page and try it out.

function grabTextWhenClicked(target){
  target.removeAttribute("onclick");
  var id=target.getAttribute("id");
  target.removeAttribute("id");
  var pos=itemHolder.getPosition(target);
  // produce an itemBox for it
  var dElt=document.createElement("div");
  dElt.setAttribute("class", 
    "itembox drag  expand  on");
  dElt.setAttribute("style", 
    "position:absolute;left:"+pos.left+"px;top:"+pos.top+"px;width:50%");
  dElt.setAttribute("id",id+"box");
  dElt.appendChild(target.cloneNode(true));
  target.parentNode.appendChild(dElt);
  // make itemolder register it
  itemHolder.initElements();
  // if uou want to remove original
  target.parentNode.removeChild(target);
}
function grabImageWhenClicked(target){
  target.removeAttribute("onclick");
  var id=target.getAttribute("id");
  target.removeAttribute("id");
  var pos=itemHolder.getPosition(target);
  // produce an itemBox for it
  var dElt=document.createElement("div");
  dElt.setAttribute("class", 
    "itembox drag no-header expand style-imagebox on");
  dElt.setAttribute("style", 
    "position:absolute;left:"+pos.left+"px;top:"+pos.top+"px");
  dElt.setAttribute("id",id+"box");
  dElt.appendChild(target.cloneNode(true));
  target.parentNode.appendChild(dElt);
  // make itemolder register it
  itemHolder.initElements();
  // if uou want to remove original
  target.parentNode.removeChild(target);
}
}