Sortables

I’ve added native EWB sortables to my Nice library.

This allows you to easily add entries to lists with drag and drop. Entries are html, so you can include images or other cool content.

Look at the sample project and try dragging three successive items to the panel in the lower right.’’

Here’s the code:

unit dragsample;

interface

uses WebCore, WebUI, WebForms, WebCtrls, WebBrwsr, WebLabels, webdom, WebCtnrs,
     WebBtns, WebEdits, nicesortables2;

type
   TForm1 = class(TForm)
      ScrollPanel1: TScrollPanel;
      BasicPanel1: TBasicPanel;
      Panel1: TPanel;
      Label1: TLabel;
      procedure Form1Show(Sender: TObject);
   private
      { Private declarations }
      draggables : TDraggable2;
      drop1, drop2, drop3 : TDraggableContainer2;
      function DropInto( dest , previous: TDraggableContainer2; src : TControl ):boolean;
      function PostDropIntoOutof( dest , previous : TDraggableContainer2; src : TControl ):boolean;

   public
      { Public declarations }
      procedure SetupDrop;
   end;

var
   Form1: TForm1;

implementation

//-------------------------------------------------------------------------------------------------------------------
procedure TForm1.SetupDrop;
begin
  // setup the system
  draggables := TDraggable2.Create( self );

  // define the containers to hold the elements
  drop1 := draggables.AddContainer( basicpanel1 );
  drop2 := draggables.Addcontainer( scrollpanel1 );
  drop3 := draggables.AddContainer( panel1 );

  drop1.addelement('Erick');
  drop1.addelement('Rosie');
  drop1.AddElement( 'Pankaj <img src="birthday.png" widht=20 height = 20><br>');

  draggables.onDragInto := DropInto;
  draggables.onPostDragIntoOutof := PostDropIntoOutof;
end;

// this is called to see if we ALLOW a drop from one container to another
function TForm1.DropInto( dest, previous : TDraggableContainer2; src : TControl ):boolean;
begin
  //
  result := True;   // default to allow

  // don't allow more than two, but allow if it is within the same container (just a reorg)
  if (dest = drop3) and (previous <> dest) and (dest.Container.ControlCount > 1) then begin
     panel1.Captionbar.caption  := 'Sorry, only maximum of two allowed';
     result := false;
  end;
end;

// This gets called after a successful post from one container to another
function TForm1.PostDropIntoOutof( dest , previous : TDraggableContainer2; src : TControl ):boolean;
var
  i : integer;
  s : string;

begin
  // always update the count number
  panel1.Captionbar.caption  := IntToStr( panel1.ControlCount ) + ' items of 2 max';

  // the controls in this panel are THTMLLabels containing data, you can iterate through them if you wish
  if dest = drop3 then begin
     for i := 0 to panel1.ControlCount -1 do begin
        s := THTMLLabel( panel1.Controls[i] ).Content;
        if Pos( 'Rosie' , s ) > 0 then
           panel1.CaptionBar.Caption := panel1.CaptionBar.Caption + ', including ' + s;
     end;
   end;
end;

//--------------------------------------------------------------------------------------------------

procedure TForm1.Form1Show(Sender: TObject);
begin
  setupdrop;
end;

end.