CoCreate-dnd

A collaborative js drag and drop component with iframe support. Great for sorting, cloning etc. Customizable using HTML5 attributes and/or JavaScript API

Install

npm i @cocreate/cocreate-dnd

Or you can use cdn link:

<script>https://cdn.cocreate.app/dnd/latest/CoCreate-dnd.min.js</script>

for styling please refer to #id-style

Usage

Dnd has high level initiator as well as a low level initiator, the concept of low level initializer is that any element can have some attributes to define the granular level of drag-and-drop, for example let's say we have a parent div and inside this div we have a few h1 tag, if we want to make all h1 tags to be drag-and-dropable in the div element we have to make the div element a droppable element:

initContainer

a high level initiator that make an element and its direct children draggable. For ease of use right out of the box we have defined a few defualts: sortable cloneable

sortable

sortable is an alias for droppable="true" with all direct children as draggable="true"


    <div class="sortable">
        <h3 >some context 1</h3>
        <h3 >some context 2</h3>
        <h3 >some context 3</h3>
    </div>
                    

cloneable

cloneables is an alias for cloneable="true" with all direct children as draggable="true"


    <div class="cloneable">
        <h3 >some context 1</h3>
        <h3 >some context 2</h3>
        <h3 >some context 3</h3>
    </div>
                    

Custom initContainer

Create your own initContainer to fit your usecase.


    inintContainer({ 
        target:, 
        cloneable:, 
        nested:, 
        group:, 
        exclude: 
    })
                    

Properties

  • target Element required

    droppable element

  • cloneable Boolean optionalDefault: False

    if true, the direct children of droppale element will be cloneable instead of draggable

  • nested Boolean optionalDefault: False

    if true, all the descendent in target will be draggable and droppable

  • handle String optional

    a valid css selector as a candidate for dragging or cloning instead of element itself

  • group String optional

    sets group name, different group names can not drag or clone into each other

  • exclude String optional

    no description

initElement

a low level initiator that make an element and all decendent dnd candidate based on selector params. For ease of use right out of the box we have defined a few defualts: droppable draggable data-exclude cloneable

Drag and Drop Attributtes

Every draggable element can be moved inside that parent, remember draggable element can only be added to droppable element


    <div droppable="true">
        <h1 draggable="true">some context 1</h1>
        <h1 cloneable="true">this element will be cloned when dragging</h1>
        <h1 draggable="true" cloneable-html="<p>hello</p>">this element will not be cloned but the value of cloneable-html</h1>
    </div>
                    

Cloneable Attributes

sometimes we don't want to just move the element but making an element exactly like the element we have, or, even create a new element compeletely different from what we have in the page. in this example we use data-clonable and cloneable-html to do that


    <div>
        <h1 cloneable="true">some context 1</h1>
        <h1 cloneable="true">this element will be cloned when dragging</h1>
        <h1 cloneable="true" cloneable-html="<p>hello</p>">this element will not be cloned but the value of cloneable-html</h1>
    </div>
                    

Default Attributes

  • droppable="true"

    makes an element droppable, any draggable or cloneable element can be dropped into this draggable to the nearsest children of the droppable element

  • draggable="true"

    makes an element ability to be draggable

  • cloneable="true"

    makes an element ability to be cloneable

  • group_name

    >by default all draggable, droppabble and cloneable can happen anywhere on the frame. to limit on this you can constraint define data-group_name

  • insert_html

    if the element define as cloneable has a cloneable-html with value of valid HTML, it will be used to create an element and to be dropped as a clone.

Custom initElement

Create your own initElement to fit your usecase.


    dndElement({ 
        target:, 
        cloneable:, 
        handle:,
        group:, 
        exclude: 
    })
                    

Properties

  • target Element required

    droppable element

  • droppable Boolean optional

    all elements in the page with matching selector will be droppable

  • draggable Boolean optional

    all elements in the page with matching selector will be draggable

  • cloneable String optional

    all elements in the page with matching selector will be cloneable

  • handle String optional

    a valid css selector as a candidate for dragging or cloning instead of element itself

  • group String optional

    sets group name, different group names can not drag or clone into each other

  • exclude String optional

    no description

How Does It Works

CoCreate-dnd works by hierarchical system, as dom is a hirearchical tree, when deciding to find an specific attribute, dnd goes up from the leaves of dom until it reach to the searching attribute. the leaf element is required to be on top of the page

to prevent dnd from going up the dom tree you can use css pointer-event: none;. it will

when deciding where to drop a draggable or cloneable element, CoCreate-dnd searching dom by going up in the tree to find a droppable element. if a droppable element found it will be selected as droppable element and the next phase will be ran, otherwise dropping element won't occur.

when found, all the direct children of the droppable will be searched and the nearest element with the nearest angle to the mouse pointer will be selected as a drop possition.

Effects and Styles

UNAVAILABLE right now: CoCreate-dnd is packed with effects such as dropMarker and ghostEffect, to uses this effects, you can either define them in tag attributes or import them and use them as initiators

some of them enabled by default, you can enable or disable them by choice and even create a new customized one

  • dropMarker Styling Selector: #marker Config: dropMarkerConfig Object

    drop marker is line that appears between element during drag and drop

  • boxMarker Styling Selector: Config:

    box markers used to hightlight an element by wrapping a border around the element. there are 3 types of boxMarkers, option, hoverable and the dragging element

  • ghostEffect Styling Selector: #ghost-effect Config:

    ghostEffects are dimmed effect that appears during drag and drop

  • moveEffect Styling Selector: Config:

    not working
  • scrollEffect Styling Selector: Config:

    during darg and drop, the dragged element can move over element by moving mouse

Events

  • dndsuccess

    dndsuccess fired on new dnd success it will contain 3 properties:

    • dragedEl
    • dropedEl
    • possition
    • dropType

Demo