За библиотеката VCL Borland е внедрила своя собствена версия на интерфейса Drag&Drop (в превод „плъзгане“). Този интерфейс е вътрешен - можете да изпращате и получавате всички Delphi контроли във формуляра "(с изключение на самия формуляр). Той се реализира без използване на съответните Windows API функции - те трябва да се използват при организиране на комуникация с други задачи чрез плъзгане и пускане .

Щракване ляв бутонмишката върху контролата, можем да я "плъзнем" до всеки друг елемент. От гледна точка на програмиста това означава, че в моментите на плъзгане и отпускане на клавиша се генерират определени събития, които предават цялата необходима информация - указател към плъзгания обект, текущи координати на курсора и др. Получателят на събитието е елементът на който този моменткурсорът се намира. Манипулаторът за такова събитие трябва да каже на системата дали дадената контрола приема "изпращането" или не. При отпускане на бутона над управлението на приемника се задействат още едно или две събития в зависимост от готовността на приемника.

CancelDrag Отменя текущата операция за плъзгане и пускане или плъзгане и закрепване.

Функция FindDragTarget (const Pos: TPoint ;AllowDisabled: Boolean): TControl ;

Функцията връща обект от базовия клас TControl , което се отнася до позицията на екрана с координатите, посочени от параметъра Pos. Тази функция се използва за определяне на потенциалния получател на операция плъзгане и пускане или плъзгане и закрепване. Ако не съществува контрола на прозореца за посочената позиция, тогава функцията се връщанула . Параметърът AllowDisabled определя дали деактивираните обекти ще бъдат взети под внимание.

Функция IsDragObject(Sender: TObject): Boolean;

Функцията определя дали обектът, указан в параметъра Sender, е наследник на класа TDragObject . Тази функцияможе да се използва като параметър Source в манипулаторите на събития OnDragOver и OnDockOver, за да се определи дали плъзганият обект ще бъде приет. Също така функция IsDragObjectможе да се използва като параметър Source в манипулаторите на събития OnDragDrop и OnDockDrop, за да се интерпретира правилно влаченият обект.

DragMode, свойства на DragCursor, методи BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag, параметър за приемане

Процесът на плъзгане на информация от един обект към друг с мишката се използва широко в Widows.Можете да местите файлове между папки, да местите самите папки и др.

Всички свойства, методи и събития, свързани с процеса на плъзгане и пускане, са дефинирани в класа TControl, който е родител на всички визуални компоненти на Delphi. Следователно те са общи за всички компоненти.

Началото на плъзгането се определя от свойството DragMode, което може да бъде зададено по време на проектиране или програмно равно на dmManual или dmAutomatic. Стойността на dmAutomatic (автоматично) определя автоматичното стартиране на процеса на плъзгане, когато потребителят щракне с бутона на мишката върху компонента. В този случай обаче събитието OnMouseDown, свързано с натискането на бутона на мишката от страна на потребителя, изобщо не възниква за този компонент.

Интерфейсът за прехвърляне и получаване на компоненти се появи отдавна. Той осигурява взаимодействие между два контрола по време на изпълнение на приложението. В този случай могат да се извършат всички необходими операции. Въпреки простотата на изпълнение и възрастта на разработката, много програмисти (особено начинаещи) смятат този механизъм за неясен и екзотичен. Използването на Drag-and-Drop обаче може да бъде много полезно и лесно за изпълнение. Сега ще проверим това.

За да работи механизмът, два контрола трябва да бъдат съответно конфигурирани. Единият трябва да бъде източникът (Source), вторият - приемникът (Target). В този случай източникът не се мести никъде, а само се регистрира като такъв в механизма.

Повярвайте ми, лесно е да се трансформирате X,Y координати, предадени в параметрите на събитията OnDragOver и OnDragDrop, в координати на формуляр.

Работете със свойствата Left и Top на компонента, върху който курсорът е поставен. Ще дам един прост пример. Поставете компонент Memo във формуляра и го задайте Подравнете свойството alTop стойност. Поставете панел върху формуляра, също така задайте свойството Align на alTop и задайте свойството Height на малка стойност, да речем 6 или 7 пиксела. Задайте DragMode на dmAutomatica и DragCursor на crVSplit. Поставете друг компонент Memo и задайте Align на alClient. Изберете двете бележки едновременно, панела и създайте общ манипулатор на събития OnDragOver, както е показано по-долу:

Функцията Drag and Drop може да помогне за подобряване на производителността на вашия iPad. Ето как можете да го използвате.

Така че можете да преместите файл от една услуга за съхранение в облак в друга, да копирате текст от Safari в приложение за редактиране на текст, за да добавите цитат или да създадете архивиранеопределени снимки в приложението за съхранение на файлове.

Как да плъзгате и пускате снимки, файлове и текст

1. Докоснете и задръжте снимката, файла или маркирания текст, който искате да плъзнете към друго приложение.

2. Плъзнете елемента към Правилно мястов това приложениеили друг, който сте отворили в Slide Over или Split View и го пуснете.

Как да плъзнете и пуснете няколко снимки или файлове наведнъж

1. Докоснете и задръжте една от снимките или файловете, които искате да плъзнете.

2. Докато плъзгате текущия елемент, докоснете друга снимка или файл, които също искате да плъзнете. Направете го отново с толкова елементи, колкото искате да преместите.

3. Плъзнете всички избрани обекти на определеното място в друго приложение, което сте отворили в Slide Over или Split View, и ги освободете.

Как да плъзнете текст от едно приложение в друго

1. Докоснете и задръжте върху частта от текста, която искате да плъзнете, за да я изберете.

2. Използвайте точки за избор, за да маркирате останалата част от текста, който искате да плъзнете.

3. Натиснете и задръжте избрания текст.

4. Плъзнете текста до приложението, където искате да го поставите, и го пуснете.

Как да промените позицията на иконите на няколко приложения наведнъж с помощта на "Плъзгане и пускане"

Докато повечето функции за плъзгане и пускане на iOS работят само на iPad, този трик всъщност работи както на iPhone, така и на iPad. Това ви позволява да организирате местоположението на приложенията на началния екран, като използвате « Плъзнете и пуснете", вместо да ги местите един по един.

1. Докоснете и задръжте иконата за приложението, което искате да преместите на началния екран.

2. Докосване допълнителни приложения, който също трябва да бъде преместен.

3. Плъзнете тези приложения до страницата или папката, където искате да бъдат, и ги пуснете.

От дълго време съществуват функции на JavaScript, които ни позволяват да създаваме интерфейси за плъзгане и пускане. Но нито една от тези реализации не е естествена за браузъра. HTML5 има свой собствен начин за създаване на интерфейси за плъзгане и пускане (с малко помощ от JavaScript). В тази статия ще ви кажем как може да се постигне това...

Поддръжка на браузър

HTML5 drag & drop понастоящем се поддържа от всички основни настолни браузъри (включително IE (дори IE 5.5 има частична поддръжка)), но не се поддържа от нито един от популярните мобилни браузъри.

Drag&Drop събития

На всеки етап от плъзгането и пускането се задействат различни събития, за да уведомят браузъра кой JavaScript код да изпълни. Списък на събитията:

• dragStart: задейства се, когато потребителят започне да плъзга елементи;
• dragEnter: задейства се, когато плъзганият елемент първо се плъзга върху целевия елемент;
• dragOver: задейства се, когато мишката се движи върху елемент, докато тече плъзгане;
• dragLeave: задейства се, ако курсорът на потребителя напусне елемента, докато плъзгате;
• drag: задейства се всеки път, когато преместим мишката, докато плъзгаме нашия елемент;
• drop: задейства се, когато се изпълни действителното drop;
• dragEnd: задейства се, когато потребителят пусне бутона на мишката, докато плъзга обект.

С всички тези слушатели на събития имате голям контрол върху това как ще работи интерфейсът.

обект за прехвърляне на данни

Тук се случва цялата магия с плъзгане и пускане. Този обект съдържа данните, подадени от операцията за плъзгане. Данните могат да се задават и извличат различни начини, най-важните от които са:

• dataTransfer.effectAllowed=стойност: връща разрешените типове действия, възможни стойности: няма, копиране, copyLink, copyMove, връзка, linkMove, преместване, всички и неинициализирани.
• dataTransfer.setData(формат, данни): Добавя конкретни данни и формат.
• dataTransfer.clearData(format): Изчиства всички данни за определен формат.
• dataTransfer.setDragImage(element, x, y): задава изображението, което искате да плъзнете, стойностите x и y показват къде трябва да бъде курсорът на мишката (0, 0 ще го позиционират горе вляво).
• data = dataTransfer.getData(format) : Както подсказва името, той връща данни за определен формат.

Пример за създаване на drag&drop

Сега ще започнем да създаваме прост пример за плъзгане и пускане. Както можете да видите, имаме два малки div и един голям, можем да плъзнем малките div в големия и дори да ги преместим обратно.

Плъзгане на обект

Първото нещо, което трябва да направим, е да създадем HTML. Правим divs възможност за плъзгане с атрибута draggable:

След като това е направено, трябва да дефинираме JavaScript функция, която ще се задейства веднага щом започнем да преместваме този елемент:

Функция dragStart(ev) ( ev.dataTransfer.effectAllowed="move"; ev.dataTransfer.setData("Текст", ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100) ; върне вярно; )

В този код първо декларираме какъв тип ефект позволяваме в операцията и го настройваме да се движи. На втория ред задаваме данните, с които да работим, където текстът ще бъде Text, а стойността ще бъде ID-то на елемента, който плъзгаме. След това използваме метода setDragImage, който ще зададе какво ще плъзгаме и след това къде ще бъде курсорът по време на плъзгане и тъй като кубчетата са 200 на 200 пиксела, го поставяме в самия център. Накрая връщаме return true.

Пуснете обект

За да може даден елемент да приеме отпадане, той трябва да слуша за 3 различни събития: dragEnter, dragOver и събитието drop. Така че нека добавим това към нашия HTML5 div с голям идентификатор:

функция dragEnter(ev) ( ev.preventDefault(); return true; ) функция dragOver(ev) (ev.preventDefault(); )

В първата функция ние определяме какво трябва да се случи, когато елементът, който плъзгаме, достигне желания елемент, където трябва да се случи изпускане, в този случай ние само предотвратяваме поведението по подразбиране на браузъра. На следващо място, във функцията dragOver ние просто не позволяваме изпускане да се случи по подразбиране.

В следващата част дефинираме функция за това, когато елемент е "хвърлен" върху желаната цел:

Функция dragDrop(ev) ( var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false; )

В тази последна част първо задаваме променливата за данни, където получаваме всички налични данни текстов формати след това добавяме данни към div, където искаме да пуснем елемента.

Направете секцията за падане цел

Демото показва, че два div могат да бъдат преместени обратно на мястото им. За щастие, добавянето на друга цел за падане е много по-лесно, отколкото си мислите. Тъй като вече имаме тези функции и всичко, което трябва да направим, е да добавим слушатели на събития:

И това е всичко, което е необходимо, за да позволи на div да бъде изтеглен обратно на мястото си.

Има много приложения за плъзгане и пускане, които са изградени с използвайки JavaScriptбиблиотеки и често са по-лесни за използване. Но се надяваме, че в този HTML5 и JavaScript техника, ще видите бъдещия потенциал за решаване на вашите проблеми.

HTML плъзгане и пусканеинтерфейсите позволяват на приложенията да използват функции за плъзгане и пускане в браузърите.Потребителят може да избере влаченеелементи с мишката, плъзнете тези елементи до a с възможност за изпусканеелемент и ги пуснете, като отпуснете бутона на мишката. Полупрозрачно представяне на влаченеелементи следва показалеца по време на операцията за плъзгане.

За уеб сайтове, разширения и XUL приложения, можешперсонализирайте кои елементи могат да станат влачене, вида на обратната връзка влаченеелементи произвеждат и с възможност за изпусканеелементи.

Този преглед на HTML плъзгане и пускане включва описание на интерфейсите, основни стъпки за добавяне на поддръжка за плъзгане и пускане към приложение и обобщение на оперативната съвместимост на интерфейсите.

Плъзнете събития

Забележка:Нито събития dragstart, нито dragend се задействат при плъзгане на файл в браузъра от операционната система.

Интерфейси

Основите

Този раздел е обобщение на основните стъпки за добавяне на функционалност за плъзгане и пускане към приложение.

идентифицирайте какво е влачене

Изработване на елемент влаченеизисква добавяне на draggable атрибут и ondragstart глобален манипулатор на събития, както е показано в следния примерен код:

Този елемент може да се плъзга.

За повече информация вижте:

справете се с падането ефект

Манипулаторът за събитието drop е свободен да обработва данните за плъзгане по специфичен за приложението начин.

Обикновено приложението използва метода getData(), за да извлече елементи с плъзгане и след това да ги обработи по съответния начин. Освен това семантиката на приложението може да се различава в зависимост от стойността на

Техниките за плъзгане и пускане са се развили в продължение на много години. Не е изненадващо, че с увеличаването на броя на програмистите, разработващи плъгини с open програмен код(напр. за jQuery) старите методи са възкресени. JavaScript библиотеката е силно адаптивна и предлага много подобрения в тази ера на уеб технологиите.

В този урок ще направим скрипт, който можем да използваме за създаване на динамични правоъгълници с плъзгане и пускане на нашия уебсайт. Процесът се контролира от jQuery. Такива скриптове спестяват време, като предоставят готова функционалност! А библиотеката с плъзгане и пускане може да се използва в други проекти.

Подготвяме съдържание

Първо, ще подготвим малък уебсайт за проекта. В папката на проекта трябва да създадете две директории с забележителни имена "js"и "css"и празен файл index.html . Кодът ще бъде много прост, така че да има ясна представа за работата и да има точка за по-нататъшно развитие.

По-долу е кодът на нашия HTML файл. В глава глававключваме 3 скрипта. Основният jQuery скрипт ще бъде зареден от сървъра на Google Code. Включен е и нашия файл style.css, който съдържа основните свойства за формиране външен виднашия документ.

В рамките на раздел тялосамо два блока див, които съдържат и двата правоъгълника. Кодът е доста прост и разбираем. Във всеки правоъгълник се поставят заглавки с класове. манипулатори манипулатор2. Това е важно, защото всеки правоъгълник се държи различно при плъзгане.

Инсталиране на CSS

HTML кодът е много прост. Ако разбирате основното маркиране, тогава css стиловесъщо няма да е трудно. Той основно определя полета, подложки и цветове.

Body,html (font-family:Calibri, sans-serif; background:#eaf3fb; font-size:12px; height:1000px; line-height:18px; ) p (height:30px; )

Селектори тяло, htmlизползва се само за демонстрационната страница. И цялото съдържание е поставено в два плъзгащи се правоъгълника.

Dv1 (ширина:200px; цвят на фона:#eff7ff; граница:1px плътен #96c2f1; позиция:абсолютен; ляво:100px; горе:100px;) .dv1 h2 (цвят на фона:#b2d3f5; подложка:5px; шрифт- семейство:Georgia, "Times New Roman", Times, serif; font-size:1.0em; text-transform:uppercase; font-weight:bold; color:#3a424a; margin:1px; cursor:move; ) .dv1 div (padding:5px; margin-bottom:10px;) .dv2 (background-color:#f6ebfb; border:1px solid #a36fde; width:550px; position:absolute; cursor:move; left:400px; top:230px; ) .dv2 h2 (цвят на фона:#eacfe9; разстояние между буквите:-0.09em; размер на шрифта:1.8em; тегло на шрифта: получер; подложка:15px; поле:1px; цвят:#241f24; курсор:преместване; ) .dv2 .content2 (padding:5px; margin-bottom:10px;)

И за двата класа .dv1 и .dv2 използваме абсолютно позициониране. Това не е необходимо и вероятно не е най-важното По най-добрия начинза позициониране на плъзгащи се правоъгълници. За нашия пример обаче това позициониране има смисъл, тъй като всеки път, когато страницата се опреснява, правоъгълниците се задават на определени места.

Освен това шрифтовете и цветовете са различни за правоъгълниците, за да се види по-лесно разликата.

В противен случай заглавията и съдържанието на блоковете са почти идентични. Ако ще копирате стилове във вашия проект, променете имената, преди да стартирате. В някои случаи ще има повече смисъл да се използват идентификатори вместо класове, като например когато се използва техника за плъзгане и пускане за един конкретен блок.

Анализ на JavaScript

Двата JavaScript файла съдържат целия код, необходим, за да работи. Ще пропуснем подробностите за работата с jQuery, тъй като това е извън обхвата на този урок. Нека обърнем внимание на файла jquery.dragndrop.js.

Ред 22 е дефиницията на функцията Влачи.

$.fn.Drags = function(opts) ( var ps = $.extend(( zIndex: 20, opacity: .7, манипулатор: null, onMove: function() (), onDrop: function() ( )), opts );

Това задава променливата за връщане и данните за инициализация Влачи. Този метод се използва много широко при работа с jQuery за предаване на опции към други функции. Вътре задаваме променливи за всички налични опции за плъзгащите се правоъгълници.

Следната част от кода включва манипулатори на събития за променливата плъзнете капка. И двете събития плъзнетеи изпускайтеизвикване на функции с предаване на параметри на събитие към тях. Тези събития възникват, когато натиснете бутона на мишката, за да плъзнете обект и след това го пуснете.

Var dragndrop = ( drag: function(e) ( var dragData = e.data.dragData; dragData.target.css(( ляво: dragData.left + e.pageX - dragData.offLeft, горе: dragData.top + e.pageY - dragData.offTop )); dragData.handler.css(( курсор: "преместване" )); dragData.target.css (( курсор: "преместване" )); dragData.onMove(e); ), капка: функция( e) ( var dragData = e.data.dragData; dragData.target.css(dragData.oldCss); //.css(( "opacity": "" )); dragData.handler.css("cursor", dragData. oldCss.cursor); dragData.onDrop(e); $().unbind("mousemove", dragndrop.drag) .unbind("mouseup", dragndrop.drop); ) )

Нашите функции манипулират CSS позиционирането на всеки обект. Ако промените абсолютното позициониране на вашите обекти, това няма да повлияе на кода, тъй като всеки JavaScript функцияпроменя всеки стил, който е дефиниран за обекта.

В останалата част от кода манипулаторът се проверява и другите стилове се променят козметично. Тук можете да добавите промяна в прозрачността, шрифта и цвета или да добавите нови параграфи.

Функции за плъзгане/пускане

Вторият файл fn.js съдържа много прост код. Изчакваме пълното зареждане на документа, след което извикваме нашите функции. Дефинирани са два екземпляра на функцията Влачи, което беше разгледано по-рано.

Имаме два плаващи блока с класове .dv1 и .dv2. Ако трябва да оставите един плаващ блок, тогава просто трябва да премахнете втората част от кода. Добавянето на друг плаващ блок също е лесно. Трябва само да добавите нова функцияв този файл.

Първата стъпка е да зададете опциите при извикване на функцията. Не забравяйте да зададете името на манипулатора. С него казваме на jQuery кой манипулатор да използва, когато бутонът на мишката е натиснат определена областдокумент. Името на манипулатора може да бъде клас или ID атрибут.

Нашата първа функция има два манипулатора на събития onMoveи onDrop. И двете извикват нови функции, които се предават на текущото събитие като променливи. Това е мястото, където HTML кодът в правоъгълника се манипулира, за да се актуализира при всяко движение. Това е страхотен ефект за демонстриране как можете да контролирате процеса с прости jQuery събития.

Във втората функция използваме параметрите z-Index и opacity. Можете да добавите други css свойства? но това ще изисква пренаписване на кода на JavaScript за валидиране на инсталациите. Например, можете да подадете различен стил на шрифт или стойности за височината и ширината на плаващия правоъгълник - много интересен трик!

Заключение

В резултат на малко работа имаме на разположение прекрасен интерфейс с функция за плъзгане и пускане. jQuery предоставя огромни предимства за разработчиците, които искат да използват старите начини в своите проекти.

В резултат на това не само получихме функции за манипулиране на събития, но също така можем да предаваме нови променливи към блокове с възможност за плъзгане. Това разкрива нови възможности за творчество. Демото към урока съдържа само накратко какво може да се направи с помощта на такъв код.

Така че вижте документацията на jQuery за използване на библиотечни функции.