DragDropWrapperUI

This can be wrapped around any ZUI component and will support the contents of the component to be dragged somewhere. This will also support the wrapped component to be a drop target.

Parameters

• content:ZUI – the content that this component should wrap around

Attributes

• hover(hvStyle:string) – when a dragged object is over this component, the hvStyle will be added to the object’s class. This allows the object to visibly react to a possible drop.
• high( hStyle:string) – whenever a dragged object is over the upper half of this component, the hStyle will be added to that component’s class. This will allow the component to respond differently to a potential drop in the top part of an object. This is particularly useful when the intent is to drop the object before the current component.
• low( hStyle:string ) – whenever a dragged object is over the lower half of this component, the hStyle will be added to that component’s class. This will allow the component to respond differently to a potential drop in the bottom part of an object. This is particularly useful when the intent is to drop the object after the current component.
• dragPayload(payload: any | ()=>any ) – This provides a value or a function to return a value that should be used as the payload. Whenever a drag of this component is initiated the component will retrieve the payload object.
• drop( doDrop:( payload:any, where?: null | “high” | “low”)=>void – When a drop occurs, the doDrop function will be called. It will have a payload parameter, which is the object being dropped, and a where parameter that will indicate if the object was dropped in the higher or lower portion of this component.

Examples

new DragDropWrapperUI(
     new TextUI(()=>{
        let student= Person.cGET(studentKey);
        let name = student.getName();
        return name;
     })
).hover("StudentHover")
     .high("StudentDropBefore").low("StudentDropAfter")
     .dragPayLoad( ()=>{
          let student = Person.cGET(studentKey);
          return student;
     })
     .drop( (student:Student,where)=>{
          if (where=="high"){
               this.addBefore(student);
          }
          if (where =="low"){
               this.addAfter(student); 
          }
     });

Styling

• DragDropWrapperUI-hover – the default style for highlighting a hover action. This is overridden by the hover, high and low attributes.