Want to create Drag and Drop Component using React Js

Question

I am new to REACT JS. I want to make a Drag and Drop React component. I already created the Draggable component which is working perfectly. But i got stucked while creating Droppable component. I am getting Draggable and Droppable component from JqueryUI.

Thanks

   var PivotTable = React.createClass({
    getInitialState: function(){
        return{ 
            selectedItems: this.props.selectedItems

        }
    },
    componentDidMount: function(){
        $(".drag-colum").draggable({cursor: "move", placeholder: "ui-state-highlight"});
        $(".drag-colum").on("dragstop", this.dragsChanged);
    },
    render: function(){
        var draggable = this.state.selectedItems.map(function(item,index){
            return(
                <div className="pivotlength">
                <li key={index} className="ui-widget-content drag-colum" data-table={item.level} data-column={item.column}>
                 <span className="column-span">{item.column}</span>                                                                         
                 <span className="level-span">{item.level}</span>
                 <p> drag me to the target</p>
                 </li>
                 </div>     
                 );
                 }.bind(this));
          return(
            <div>
            <ul id="draggable" >
                {draggable}
            </ul>
              <div class = "row">
                <li className="ui-widget-header" id="droppable">Row</li>
                <li className="ui-widget-header" id="droppable">Column</li>
                <li className="ui-widget-header" id="droppable">Data</li>
                <li className="ui-widget-header" id="droppable">Pages</li>
            </div>
            )
       }
});          

var test = function(event){
    console.log(event);
}

var selectedItems = [{"column":"browser_ip","level":"order","relation":"one","custom_name": "Browser IP","item":{"dtype":"string","id":"browser_ip","type":"normal","name":"Browser IP","desc":"<p>The IP address of the browser used by the customer when placing the order.</p>"}},{"column":"email","level":"order","relation":"one","custom_name": "Email","item":{"dtype":"string","id":"email","type":"normal","name":"Email","desc":"<p>The customer's email address. Is required when a billing address is present.</p>"}},{"column":"name","level":"order","relation":"one","custom_name": "Name","item":{"dtype":"string","id":"name","type":"normal","name":"Name","desc":"<p>The customer's order name as represented by a number</p>"}},{"column":"order_number","level":"order.line_items","relation":"one","custom_name": "","item":{"dtype":"integer","id":"order_number","type":"normal","name":"Order Number","desc":"<p>A unique numeric identifier for the order. This one is used by the shop owner and customer. This is different from the id property, which is also a unique numeric identifier for the order, but used for API purposes.</p>"}},{"column":"currency","level":"order.line_items","relation":"one","custom_name": "","item":{"dtype":"string","id":"currency","type":"normal","name":"Currency","desc":"<p>The three letter code (ISO 4217) for the currency used for the payment.</p>"}}];

React.render(<PivotTable selectedItems={selectedItems} handleSelected={this.test} />, document.getElementById("container"));

</script>

<script>
$(document).ready(function(){
});
</script>

Menporul Poriyalan · Accepted Answer · 2018-04-17 06:56:12Z

2

Yes!! Finally, I found out the answer

$(".droppable").droppable({
        accept: ".drag-colum",
              drop: function( event, ui ) {
                $( this ).addClass( "highlight-me" );
               console.log(event.target.innerHTML,  "-", ui.draggable[0].attributes["data-column"].value);
              },
              out: function( event, ui ) {
                $( this ).addClass( "highlight-me" );
               console.log(event.target.innerHTML,  "-", ui.draggable[0].attributes["data-column"].value);
              }
    });

I Just add this function in my ComponentDidmount function and it works now.

edited Apr 17, 2018 at 6:56

answered Apr 27, 2016 at 11:40

Menporul Poriyalan

1322 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hamed Minaee Over a year ago

Hey I have a similar case but in my case droppable does not get recognized properly. Can you please take a look at this: stackoverflow.com/questions/41578861/… and let me know if you have any idea?

Raymond Smith · Accepted Answer · 2016-04-27 10:36:28Z

0

Have you tried using this ? I have used this in a project and it worked quite well with drag and dropping images in a gallery. Also check my repo where I utilise this. Let me know if you need any more help here.

answered Apr 27, 2016 at 10:36

Raymond Smith

32 bronze badges

1 Comment

Menporul Poriyalan Over a year ago

Thank you! But i want to create it without using NPM

Collectives™ on Stack Overflow

Want to create Drag and Drop Component using React Js

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related