拖放、可重新排序的列表的低级（无框架）示例？

Posted 2023-05-08

【中文标题】拖放、可重新排序的列表的低级（无框架）示例？

【英文标题】：Does anyone know of a low level (no frameworks) example of a drag & drop, re-order-able list?有谁知道

【发布时间】：2013-05-03 06:51:46

【问题描述】：

我正在寻找可以通过拖放重新排序的基本图形列表的代码（任何语言）。所以正是这个功能http://jqueryui.com/sortable/，但直接写在帧缓冲区/画布上，没有任何框架（或最多低级别的“放置像素”库），可能不在 html/JS 中（除非它只是没有 CSS 的画布）。

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

【问题讨论】：

你不是唯一一个有这个请求的人 :) 它真的还在等待中吗？我想我现在正在做一些感兴趣的事情。

刚刚发现这个问题......如果你需要一些帮助，请寻找我的答案只是评论我......顺便说一句，有没有办法在这个网站上发布那个 zip？ （图像不是问题，但源 + exe 有什么问题）因为在其他网站上发布的内容可能会及时被破坏......通常是我在 *** 上看到的大多数旧问题:(

【参考方案1】：

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

这是我几年前在课堂上为我的学生编写的代码：

http://ulozto.net/x2b7WLwJ/select-drag-drop-zip

这是主引擎代码（完整的项目+ 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 工具按钮（由同一个 guid 锁定在一起，因此一次只能关闭一个）

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

为了简单起见，一切都是静态分配的

[edit1] 更多信息

创建 gfx 对象数据类型/类 (atom_xxxx)

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

对象 ID

我正在使用int tp,ix;

tp 表示对象的类型 ix 表示tp 类型对象列表中的索引

编辑引擎

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

可视化变量，如屏幕/后缓冲位图或渲染上下文、鼠标位置、选择列表 添加函数/事件，如onmouse, onkey, draw,... 添加编辑功能它应该能够select,add,del,move（拖放）对象。理想地由一组命令控制以简化撤消/重做操作 添加undo/redo 添加save,load 添加您想要的模拟功能

如果我没有忘记什么，那就是这样。

创建应用程序 GUI 界面

所以创建窗口，为每个工具、菜单和任何你需要的东西添加带有按钮的面板。为鼠标、键盘、重绘、调整大小、拖放、...添加事件我的示例如下所示：

将editor edit; 全局添加到它或作为它的成员。如果您想稍后拥有 MDI，则成员选项会更好。在edit和window之间添加事件接口（第二个源码）。

[备注]

++++ 标记部分代码，如果将任何原子类型添加到系统中，您需要在其中添加更改 **** 标记部分代码，如果将任何编辑模式添加到系统中，您需要在其中添加更改

如果您需要澄清一些评论我，很抱歉没有添加更多评论代码。

希望对你有所帮助...