Jump to content
Sign in to follow this  
lynkfs

drag and drop

Recommended Posts

I've spend hours to implement a simple drag & drop mechanism, and I've given up.

The mechanism is not that difficult, but the browser implementations drive me nuts.

The problem is that on different chrome browsers the 'drop' position is off from what it should be. 

If someone's interested, the code below works flawlessly in the internal ide browser. Executing on win10-latest chrome you'll see a jump in positioning of elements when dropped.

I've finally figured out, that the jump-amount is based on where the element has been 'grabbed'. It is zero when grabbing top/left, and half the width of the grabbed element when grabbed bottom/right.

Checking up on stack-overflow, there are heaps of references to this problem. Without a workable solution. And posts dating from 6 years ago until recently. One might expect these type of bugs to be resolved in a timespan that long.

test-code

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components

  Var Drag : JW3Panel := JW3Panel.Create(self);
  Drag.SetBounds(50,50,100,100);
  Drag.handle.style.border := '1px solid silver';
  Drag.handle.setAttribute('draggable','true');

  Var Drop : JW3Panel := JW3Panel.Create(self);
  Drop.SetBounds(50,300,400,200);
  Drop.handle.style.border := '1px solid silver';

  Drag.handle.ondragstart := procedure(ev: variant)
  begin
    Drop.handle.ondragover := procedure(ev: variant)
    begin
      ev.preventDefault();
    end;
    //payload = image.id, mouse-offsetX and mouse-offsetY
    ev.dataTransfer.setData("text", ev.target.id + ';' +   
                            inttostr(ev.offsetX) + ';' +
                            inttostr(ev.offsetY));
    ev.dataTransfer.effectAllowed := "copy";
    ev.dataTransfer.dropEffect    := "copy";
  end;

  Drop.handle.ondrop := procedure(ev: variant)
  begin
    ev.preventDefault();
    var data := ev.dataTransfer.getData("text");
    //split payload into image.id, mouse-offsetX and mouse-offsetY
    var myarray := StrSplit(data,';');
    var target : variant := document.getElementById(myarray[0]);

    ev.target.appendChild(target);
    target.style.left := ev.offsetX - StrToInt(MyArray[1]) + "px";
    target.style.top  := ev.offsetY - StrToInt(MyArray[2]) + "px";
  end;
end;

I've ended up with a mouse-event based drag & drop solution rather than using the html5 based d&d api.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...