WoW:Making Draggable Frames: Difference between revisions

fill out both options for moving a frame in both lua and xml
(nowiki in XML comments.)
(fill out both options for moving a frame in both lua and xml)
Line 5: Line 5:
To initiate dragging of a frame, call {{api|Frame StartMoving|Frame:StartMoving()}}; to stop, call {{api|Frame StopMovingOrSizing|Frame:StopMovingOrSizing()}}. The frame must be flagged as movable (either through the movable attribute in its XML declaration or using {{api|Frame SetMovable|Frame:SetMovable}}(isMovable).
To initiate dragging of a frame, call {{api|Frame StartMoving|Frame:StartMoving()}}; to stop, call {{api|Frame StopMovingOrSizing|Frame:StopMovingOrSizing()}}. The frame must be flagged as movable (either through the movable attribute in its XML declaration or using {{api|Frame SetMovable|Frame:SetMovable}}(isMovable).


While those functions can theoretically be called from anywhere, {{api|Frame RegisterForDrag|Frame:RegisterForDrag}}("button1", ...) allows the use of OnDragStart/OnDragStop widget handlers. Note that to receive mouse events (including dragging), the frame must be mouse enabled (either through the enableMouse attribute in its XML declaration or using {{api|Frame EnableMouse|Frame:EnableMouse}}(isEnabled)); buttons are mouse-enabled by default.
There are generally 2 methods that are used for moving a frame, by Dragging the frame (OnDragStart & OnDragStop Handlers) or Clicking the frame (OnMouseDown & OnMouseUp Handlers). Note: that to receive mouse events (including dragging), the frame must be mouse enabled (either through the enableMouse attribute in its XML declaration or using {{api|Frame EnableMouse|Frame:EnableMouse}}(isEnabled)); buttons are mouse-enabled by default.


== Using XML ==
== Using XML ==
The code below creates a draggable Frame widget and uses the Drag widget handlers to initiate dragging. Note the use of movable and enableMouse attributes:
=== Using OnDragStart / OnDragStop ===
The code below creates a draggable Frame widget and uses the OnDrag widget handlers to initiate dragging. Note the use of movable and enableMouse attributes:
  <Frame name="DragFrame1" enableMouse="true" movable="true">
  <Frame name="DragFrame1" enableMouse="true" movable="true">
   <Scripts>
   <Scripts>
Line 26: Line 27:
   <Anchors><Anchor point="CENTER" relativeTo="UIParent"/></Anchors>
   <Anchors><Anchor point="CENTER" relativeTo="UIParent"/></Anchors>
  </Frame>
  </Frame>
Note the use of the OnLoad Script, In order to drag a frame it must register for drag via {{api|Frame RegisterForDrag|Frame:RegisterForDrag("button")}}.


=== Using OnMouseUp/OnMouseDown ===
=== Using OnMouseUp/OnMouseDown ===
The OnDrag* handlers typically require the mouse button to be held down for a small amount of time prior to enabling the mouse behavior, making them well suited for dragging widgets that normally respond to clicks. However, if the frame you wish to make draggable is not normally a button, you can use OnMouseUp/OnMouseDown to provide a more responsive experience.
While OnDrag* handlers typically require the mouse button to be held down for a small amount of time prior to enabling the mouse behavior, making them well suited for dragging widgets that normally respond to clicks. However, if the frame you wish to make draggable is not normally a button, you can use OnMouseUp/OnMouseDown to provide a more responsive experience.


The following snippet illustrates this concept, and should replace the <Scripts> block above:
The following snippet illustrates this concept, and should replace the <Scripts> block above:
  <Scripts>
  <Scripts>
   <OnMouseDown>
   <OnMouseDown>
   if button == "LeftButton" and not self.isLocked then
   if button == "LeftButton" and not self.isMoving then
     self:StartMoving();
     self:StartMoving();
     self.isMoving = true;
     self.isMoving = true;
Line 76: Line 79:


== Using Lua ==
== Using Lua ==
=== Using OnDragStart OnDragStop ===
The code sample below illustrates the use of the [[Widget API]] to achieve the same results as the XML above:
The code sample below illustrates the use of the [[Widget API]] to achieve the same results as the XML above:
  local frame = CreateFrame("Frame", "DragFrame2", UIParent)
  local frame = CreateFrame("Frame", "DragFrame2", UIParent)
  frame:SetMovable(true)
  frame:SetMovable(true)
  frame:EnableMouse(true)
  frame:EnableMouse(true)
  frame:SetScript("OnMouseDown", frame.StartMoving)
frame:RegisterForDrag("LeftButton")
  frame:SetScript("OnMouseUp", frame.StopMovingOrSizing)
  frame:SetScript("OnDragStart", frame.StartMoving)
  frame:SetScript("OnDragStop", frame.StopMovingOrSizing)
  -- The code below makes the frame visible, and is not necessary to enable dragging.
  -- The code below makes the frame visible, and is not necessary to enable dragging.
  frame:SetPoint("CENTER"); frame:SetWidth(64); frame:SetHeight(64);
  frame:SetPoint("CENTER"); frame:SetWidth(64); frame:SetHeight(64);
Line 87: Line 92:
  tex:SetAllPoints();
  tex:SetAllPoints();
  tex:SetTexture(1.0, 0.5, 0); tex:SetAlpha(0.5);
  tex:SetTexture(1.0, 0.5, 0); tex:SetAlpha(0.5);
=== Using OnMouseDown / OnMouseUp ===
The code sample below illustrates the use of the [[Widget API]] to achieve the same results as the XML above:
local frame = CreateFrame("Frame", "DragFrame2", UIParent)
frame:SetMovable(true)
frame:EnableMouse(true)
frame:SetScript("OnMouseDown", function(self)
  if button == "LeftButton" and not self.isMoving then
    self:StartMoving();
    self.isMoving = true;
  end
end)
frame:SetScript("OnMouseUp", function(self)
  if button == "LeftButton" and self.isMoving then
    self:StopMovingOrSizing();
    self.isMoving = false;
  end
end)
frame:SetScript("OnHide", function(self)
  if ( self.isMoving ) then
    self:StopMovingOrSizing();
    self.isMoving = false;
  end
end)
-- The code below makes the frame visible, and is not necessary to enable dragging.
frame:SetPoint("CENTER"); frame:SetWidth(64); frame:SetHeight(64);
local tex = frame:CreateTexture("ARTWORK");
tex:SetAllPoints();
tex:SetTexture(1.0, 0.5, 0); tex:SetAlpha(0.5);
==General Notes==
The use of the OnHide Handler is not entirely necessary. However it is a good idea if your frames are being Hidden or Shown by running code and not the User.
The use of full functions is also not required in lua:
frame:SetScript("OnDragStart" frame.StartMoving)
frame:SetScript("OnDragStop" frame.StopMovingOrSizing)
frame:SetScript("OnMouseDown" frame.StartMoving)
frame:SetScript("OnMouseUp" frame.StopMovingOrSizing)
In XML all that is required is just the function:
<OnDragStart>self:StartMoving();</OnDragStart>
<OnDragStop>self:StopMovingOrSizing();</OnDragStop>
<OnMouseDown>self:StartMoving();</OnMouseDown>
<OnMouseUp>self:StopMovingOrSizing();</OnMouseUp>
Anonymous user