Кто-нибудь знает низкоуровневый (без фреймворка) пример перетаскивания, переупорядочиваемого списка?

Question

Я ищу код (любой язык) из базового графического списка, который может быть изменен путем перетаскивания. Так что именно эта функциональность http://jqueryui.com/sortable/ но написана непосредственно в буфере / холсте фрейма без каких-либо фреймворков (или максимально низкоуровневых библиотек 'put pixel') и, вероятно, не в HTML/JS (если это не только Canvas без CSS).

Чем проще, тем лучше, так как я буду использовать его в ассемблере, и я не хочу изобретать велосипед, если он не нужен.

Answer 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 кнопки инструментов (заблокированы одной и той же направляющей, поэтому одновременно может быть нажата только одна)

• добавить инструмент круга
• добавить квадратный инструмент
• инструмент перемещения
• инструмент удаления

Все статично выделено для простоты

[edit1] больше информации

1. создать объект / тип данных gfx ( atom_xxxx )

   он должен держать size,position,shape визуального gfx представления объекта. Добавить переменные соединения (объект type и объект index с чем это должно быть связано). Добавить реальный объект / данные внутри

2. идентификатор объекта

   я использую int tp,ix;

   • tp означает тип объекта
   • ix означает индекс в списке объектов типа tp

3. движок редактора

   это должен быть также класс или набор переменных и функций. Он должен содержать весь отредактированный мир (списки объектов):

   • переменные визуализации, такие как растровое изображение экрана / фоновой буфера или контекст рендеринга, положение мыши, список выбора
   • добавить функции / события, такие как onmouse, onkey, draw,...
   • добавить функцию редактирования, она должна быть в состоянии select,add,del,move (перетаскивание) объектов. Идеально контролируется набором команд для облегчения операции отмены / возврата
   • добавлять undo/redo
   • добавлять save,load
   • добавить желаемую функциональность симуляции

   и это все, если я что-то не забыл.

4. создать графический интерфейс приложения

   поэтому создайте окно, добавьте панель с кнопками для каждого инструмента, меню и всего, что вам нужно. Добавить события для мыши, клавиатуры, перерисовки, изменения размера, перетаскивания,... Мой пример выглядит следующим образом:

   

   добавлять editor edit; к нему глобально или как член этого. Опция "Член" лучше, если вы хотите иметь MDI позже. Добавить интерфейс событий между правкой и окном (второй исходный код).

[Заметки]

• ++++ отмечает часть кода, где вам нужно добавить изменения, если в систему добавлен атом любого типа
• **** отмечает часть кода, где вам нужно добавить изменения, если какой-либо режим редактирования добавлен в систему

Извините, что не добавляю больше комментариев, если вам нужно что-то уточнить, прокомментируйте меня

Надеюсь, это поможет немного...