有没有人知道一个低级别（没有框架）的拖放，重新sorting列表的例子？

我正在寻找可以通过拖放重新sorting的基本graphics列表的代码（任何语言）。 所以，正是这个functionhttp://jqueryui.com/sortable/，但直接写在帧缓冲区/canvas没有任何框架（或低级别放置像素'库至多），可能不是在HTML / JS（除非它是帆布只没有CSS）。

越简单越好，因为我将在汇编程序中使用它，如果不需要，我不想重新发明轮子。

我讨厌框架，所以这对我来说很容易

这是我在几年前的讲座中为我的学生编写的代码：

这是主引擎代码（完整的项目+ exe是在上面的zip）： 

//--------------------------------------------------------------------------- //--- Constants: ------------------------------------------------------------ //--------------------------------------------------------------------------- const int _select_max_l=16; const int _select_max_ll=_select_max_l*_select_max_l; const int _half_size=10; const int _atoms_max=32; //--------------------------------------------------------------------------- enum _atom_type_enum //++++ { _atom_type_non=0, _atom_type_kruh, _atom_type_stvorec, _atom_type_enum_end }; //--------------------------------------------------------------------------- enum _editor_edit_mode_enum //**** { _editor_edit_mode_non=0, _editor_edit_mode_move, _editor_edit_mode_mov, _editor_edit_mode_add_kruh, _editor_edit_mode_add_stvorec, _editor_edit_mode_del, _editor_edit_mode_enum_end }; //--------------------------------------------------------------------------- //--- viewer: --------------------------------------------------------------- //--------------------------------------------------------------------------- class viewer { public: int x0,y0; viewer() { x0=0; y0=0; } void world2screen(int &sx,int &sy,int wx,int wy) { sx=wx-x0; sy=wy-y0; } void screen2world(int &wx,int &wy,int sx,int sy) { wx=sx+x0; wy=sy+y0; } void world2screen(int &sl,int wl) { sl=wl; } void screen2world(int &wl,int sl) { wl=sl; } }; //--------------------------------------------------------------------------- //--- atom kruh: ------------------------------------------------------------ //--------------------------------------------------------------------------- class atom_kruh { public: int x,y,r; // world coordinates TColor col0,col1,col2; AnsiString str; atom_kruh() { x=0; y=0; r=_half_size; str=""; col0=clBlue; col1=clAqua; col2=clWhite; } void draw(TCanvas *scr,const viewer &view) { int xx,yy,rr; view.world2screen(xx,yy,x,y); view.world2screen(rr,r); scr->Brush->Color=col0; scr->Pen ->Color=col1; scr->Font ->Color=col2; scr->Ellipse(xx-rr,yy-rr,xx+rr,yy+rr); scr->Brush->Style=bsClear; xx-=scr->TextWidth(str)>>1; yy-=scr->TextHeight(str)>>1; scr->TextOutA(xx,yy,str); scr->Brush->Style=bsSolid; } bool select(int &ll,int wx,int wy) { int qq,xx,yy; xx=wx-x; xx*=xx; yy=wy-y; yy*=yy; qq=xx+yy; if ((qq<=_select_max_ll)&&((qq<=ll)||(ll<0))) { ll=qq; return true; } return false; } }; //--------------------------------------------------------------------------- //--- atom kruh: ------------------------------------------------------------ //--------------------------------------------------------------------------- class atom_stvorec { public: int x,y,r; // world coordinates TColor col0,col1,col2; AnsiString str; atom_stvorec() { x=0; y=0; r=_half_size; str=""; col0=clBlue; col1=clAqua; col2=clWhite; } void draw(TCanvas *scr,const viewer &view) { int xx,yy,rr; view.world2screen(xx,yy,x,y); view.world2screen(rr,r); scr->Brush->Color=col0; scr->Pen ->Color=col1; scr->Font ->Color=col2; scr->Rectangle(xx-rr,yy-rr,xx+rr,yy+rr); scr->Brush->Style=bsClear; xx-=scr->TextWidth(str)>>1; yy-=scr->TextHeight(str)>>1; scr->TextOutA(xx,yy,str); scr->Brush->Style=bsSolid; } bool select(int &ll,int wx,int wy) { int qq,xx,yy; xx=wx-x; xx*=xx; yy=wy-y; yy*=yy; qq=xx+yy; if ((qq<=_select_max_ll)&&((qq<=ll)||(ll<0))) { ll=qq; return true; } return false; } }; //--------------------------------------------------------------------------- //--------------------------------------------------------------------------- //--------------------------------------------------------------------------- class editor { public: Graphics::TBitmap *bmp; // back buffer int xs,ys; int sel_ix,sel_tp; // actual mouse selected item int edit_mode; // selected edit tool viewer view; // view bool redraw; // redraw needed? bool locked; // edit in progress? WORD key,key0; int mx,my,mx0,my0; TShiftState sh,sh0; atom_kruh kruh[_atoms_max]; // all object lists atom_stvorec stvorec[_atoms_max]; int kruhov; int stvorcov; editor(); ~editor(); void resize(int _xs,int _ys); // interface with window void draw(); void mouse(int x,int y,TShiftState s) { mx0=mx; my0=my; sh0=sh; mx=x; my=y; sh=s; edit(); } void keys(WORD k,TShiftState s) { key0=key; sh0=sh; key=k; sh=s; edit(); } void select(); // helper functions void edit(); void move (bool q0,bool q1,int x,int y,int dx,int dy); void mov (bool q0,bool q1,int x,int y,int dx,int dy); void add_kruh (bool q0,bool q1,int x,int y,int dx,int dy); void add_stvorec(bool q0,bool q1,int x,int y,int dx,int dy); void del (bool q0,bool q1,int x,int y,int dx,int dy); }; //--------------------------------------------------------------------------- editor::editor() { bmp=new Graphics::TBitmap; resize(1,1); sel_ix=-1; sel_tp=_atom_type_non; edit_mode=_editor_edit_mode_non; key=0; key0=0; mx=0; mx0=0; my=0; my0=0; locked=false; kruhov=0; stvorcov=0; } //--------------------------------------------------------------------------- editor::~editor() { delete bmp; } //--------------------------------------------------------------------------- void editor::resize(int _xs,int _ys) { bmp->Width=_xs; bmp->Height=_ys; xs=bmp->Width; ys=bmp->Height; redraw=true; } //--------------------------------------------------------------------------- void editor::draw() { int i; if (!redraw) return; redraw=false; bmp->Canvas->Brush->Color=clBlack; bmp->Canvas->FillRect(Rect(0,0,xs,ys)); //++++ for (i=0;i<kruhov ;i++) kruh[i] .draw(bmp->Canvas,view); for (i=0;i<stvorcov;i++) stvorec[i].draw(bmp->Canvas,view); } //--------------------------------------------------------------------------- void editor::select() { int i,wx,wy,ll; int sel_tp0=sel_tp; sel_tp=_atom_type_non; int sel_ix0=sel_ix; sel_ix=-1; view.screen2world(wx,wy,mx,my); //++++ ll=-1; for (i=0;i<kruhov ;i++) if (kruh[i] .select(ll,wx,wy)) { sel_tp=_atom_type_kruh; sel_ix=i; }; for (i=0;i<stvorcov;i++) if (stvorec[i].select(ll,wx,wy)) { sel_tp=_atom_type_stvorec; sel_ix=i; }; if (sel_tp!=sel_tp0) redraw=true; if (sel_ix!=sel_ix0) redraw=true; } //--------------------------------------------------------------------------- void editor::edit() { bool q0,q1; int x,y,dx,dy; x=mx; dx=mx-mx0; y=my; dy=my-my0; view.screen2world( x, y, x, y); view.screen2world(dx,dx); view.screen2world(dy,dy); q0=sh0.Contains(ssLeft); q1=sh .Contains(ssLeft); if (!locked) select(); //**** if(edit_mode==_editor_edit_mode_mov) mov (q0,q1,x,y,dx,dy); if(edit_mode==_editor_edit_mode_add_kruh) add_kruh (q0,q1,x,y,dx,dy); if(edit_mode==_editor_edit_mode_add_stvorec)add_stvorec (q0,q1,x,y,dx,dy); if(edit_mode==_editor_edit_mode_del) del (q0,q1,x,y,dx,dy); q0=sh0.Contains(ssRight); q1=sh .Contains(ssRight); if (!locked) move(q0,q1,x,y,dx,dy); } //--------------------------------------------------------------------------- void editor::move (bool q0,bool q1,int x,int y,int dx,int dy) { if ((sel_ix>=0)&&(sel_tp!=_atom_type_non)) return; if (q1) { view.x0-=dx; view.y0-=dy; redraw=true; } } //--------------------------------------------------------------------------- void editor::mov (bool q0,bool q1,int x,int y,int dx,int dy) { if ((!locked)&&((sel_ix<0)||(sel_tp==_atom_type_non))) return; locked=false; if ((q1)||((q0)&&(!q1))) { //++++ if (sel_tp==_atom_type_kruh) { kruh[sel_ix].x=x; kruh[sel_ix].y=y; } if (sel_tp==_atom_type_stvorec) { stvorec[sel_ix].x=x; stvorec[sel_ix].y=y; } locked=true; } if (!q1) locked=false; redraw=true; } //--------------------------------------------------------------------------- void editor::add_kruh (bool q0,bool q1,int x,int y,int dx,int dy) { if ((!locked)&&(sel_ix>=0)&&(sel_tp!=_atom_type_non)) return; locked=false; if (kruhov>=_atoms_max) return; if ((!q0)&&( q1)) { sel_tp=_atom_type_kruh; sel_ix=kruhov; kruhov++; kruh[sel_ix].x=x; kruh[sel_ix].y=y; kruh[sel_ix].str=kruhov; locked=true; } if (( q0)&&( q1)) { kruh[sel_ix].x=x; kruh[sel_ix].y=y; locked=true; } if (( q0)&&(!q1)) { kruh[sel_ix].x=x; kruh[sel_ix].y=y; } if ((!q0)&&(!q1)) { } redraw=true; } //--------------------------------------------------------------------------- void editor::add_stvorec(bool q0,bool q1,int x,int y,int dx,int dy) { if ((!locked)&&(sel_ix>=0)&&(sel_tp!=_atom_type_non)) return; locked=false; if (stvorcov>=_atoms_max) return; if ((!q0)&&( q1)) { sel_tp=_atom_type_stvorec; sel_ix=stvorcov; stvorcov++; stvorec[sel_ix].x=x; stvorec[sel_ix].y=y; stvorec[sel_ix].str=stvorcov; locked=true; } if (( q0)&&( q1)) { stvorec[sel_ix].x=x; stvorec[sel_ix].y=y; locked=true; } if (( q0)&&(!q1)) { stvorec[sel_ix].x=x; stvorec[sel_ix].y=y; } if ((!q0)&&(!q1)) { } redraw=true; } //--------------------------------------------------------------------------- void editor::del (bool q0,bool q1,int x,int y,int dx,int dy) { locked=false; if ((sel_ix<0)||(sel_tp==_atom_type_non)) return; if ((!q0)&&( q1)) { //++++ if (sel_tp==_atom_type_kruh) if (kruhov>0) { kruhov--; kruh[sel_ix]=kruh[kruhov]; } if (sel_tp==_atom_type_stvorec) if (stvorcov>0) { stvorcov--; stvorec[sel_ix]=stvorec[stvorcov]; } sel_ix=-1; sel_tp=_atom_type_non; } redraw=true; } //---------------------------------------------------------------------------

对不起，这不完全是英文

  • kruh意思是圈子
  • stvorec意味着广场

这是窗口代码（ BDS2006 VCL风格） 

 //$$---- Form CPP ---- //--------------------------------------------------------------------------- #include <vcl.h> #pragma hdrstop #include "Unit1.h" #include "editor.h" //--------------------------------------------------------------------------- #pragma package(smart_init) #pragma resource "*.dfm" TForm1 *Form1; editor edit; int x0,y0; //--------------------------------------------------------------------------- //--------------------------------------------------------------------------- //--------------------------------------------------------------------------- void draw() // redraw app screen { edit.draw(); Form1->Canvas->Draw(x0,y0,edit.bmp); // here just some info print outs int dy=16,x=x0,y=y0-dy; Form1->Canvas->Font->Color=clAqua; Form1->Canvas->Brush->Style=bsClear; Form1->Canvas->TextOutA(x,y+=dy,AnsiString().sprintf("locked: %i",edit.locked)); Form1->Canvas->TextOutA(x,y+=dy,AnsiString().sprintf("Key: %d",edit.key)); Form1->Canvas->TextOutA(x,y+=dy,AnsiString().sprintf("sel_tp: %i",edit.sel_tp)); Form1->Canvas->TextOutA(x,y+=dy,AnsiString().sprintf("sel_ix: %i",edit.sel_ix)); Form1->Canvas->TextOutA(x,y+=dy,AnsiString().sprintf("kruhov: %i",edit.kruhov)); Form1->Canvas->TextOutA(x,y+=dy,AnsiString().sprintf("stvorcov: %i",edit.stvorcov)); Form1->Canvas->Brush->Style=bsSolid; } //--------------------------------------------------------------------------- __fastcall TForm1::TForm1(TComponent* Owner):TForm(Owner) // init app { // select tool on app start bt_tool_kruhClick(this); } //--- window events: --------------------------------------------------------- void __fastcall TForm1::FormPaint(TObject *Sender) { draw(); } void __fastcall TForm1::FormResize(TObject *Sender) { x0=pan_top->Left; y0=pan_top->Height; edit.resize(ClientWidth-x0,ClientHeight-y0); draw(); } void __fastcall TForm1::FormActivate(TObject *Sender) { draw(); } //--------------------------------------------------------------------------- void __fastcall TForm1::FormKeyDown(TObject *Sender, WORD &Key, TShiftState Shift) { edit.keys(Key,Shift); draw(); } void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift, int X, int Y) { edit.mouse(X-x0,Y-y0,Shift); draw(); } void __fastcall TForm1::FormMouseDown(TObject *Sender, TMouseButton Button, TShiftState Shift, int X, int Y){ edit.mouse(X-x0,Y-y0,Shift); draw(); } void __fastcall TForm1::FormMouseUp(TObject *Sender, TMouseButton Button, TShiftState Shift, int X, int Y) { edit.mouse(X-x0,Y-y0,Shift); draw(); } //--------------------------------------------------------------------------- void __fastcall TForm1::bt_tool_kruhClick(TObject *Sender) // event on any tool button click { // select editor tool mode ... edit.edit_mode=_editor_edit_mode_non; if (bt_tool_kruh ->Down) edit.edit_mode=_editor_edit_mode_add_kruh; if (bt_tool_stvorec->Down) edit.edit_mode=_editor_edit_mode_add_stvorec; if (bt_tool_move ->Down) edit.edit_mode=_editor_edit_mode_mov; if (bt_tool_delete ->Down) edit.edit_mode=_editor_edit_mode_del; } //---------------------------------------------------------------------------

窗口只有4工具button（通过同一个GUID锁在一起，所以一次只能有一个按下）

  • 添加圆形工具
  • 添加方形工具
  • 移动工具
  • 删除工具

一切都是静态分配的简单

[edit1]更多信息

  1. 创buildgfx对象数据types/类（ atom_xxxx ）

    它应该保持对象的视觉gfx表示的size,position,shape 。 添加连接variables（对象type和对象index到它应该连接的东西）。 添加真实的对象/数据里面

  2. 对象ID

    我使用int tp,ix;

    • tp表示对象的types
    • ix表示types为tp的对象列表中的索引

  3. 编辑引擎

    这也应该是一类或一组variables和函数。 它应该包含整个编辑的世界（对象列表）：

    • 可视化variables，如屏幕/后台缓冲位图或渲染上下文，鼠标位置，select列表
    • 添加像onmouse, onkey, draw,等function/事件…
    • 添加编辑function，应该可以select,add,del,move （拖放）对象。 理想情况下通过一组命令来控制撤消/重做操作
    • 添加undo/redo
    • 添加save,load
    • 添加您所需的模拟function

    如果我没有忘记什么的话。

  4. 创build应用程序GUI界面

    所以创build窗口，为每个工具，菜单和任何你需要的button添加面板。 添加事件鼠标，键盘，重绘，resize，拖放，…我的例子看起来像这样：

    编辑应用程序

    添加editor edit; 在全球范围内或作为其成员。 如果您稍后想要MDI，会员选项会更好。 在编辑和窗口之间添加事件接口（第二个源代码）。

[笔记]

  • 如果将任何primefacestypes添加到系统中，则++++标记需要添加更改的代码的一部分
  • ****标记代码的一部分，如果任何编辑模式添加到系统中，您需要添加更改

对不起，如果你需要澄清一些评论我不添加更多的评论代码。

希望它有一点帮助…

Interesting Posts