DRAG AND DROP IN REACT (React DND)

DRAG AND DROP IN REACT

React DND

React DND

This is an example of implementing drag and drop functionality using React. This is the first example where we’ll use an external library, in this case, React DnD.

Components

This example will have two major components: Bin, a component where objects can be dropped, and Item, an item that can be dragged and dropped.

React DND, as you would expect, supports applying different functionality to different sets of data that is to be dragged and dropped. We declare the different types of item in the ItemTypes object, which is simple since in this example we only have one type of draggable item:

constItemTypes={
    ITEM:'item'};

First, we define the Item component, and declare it draggable. Because React DND, like the underlying HTML5 drag-and-drop API, supports dragging data as well as visible objects, we have to decalare what kind of data should be moved along with the component. The beginDrag function does it, and in this case we only carry the component’s name, since it’s the only data it has.

varItem=React.createClass({
  mixins:[DragDropMixin],

  statics:{
    configureDragDrop:function(register){register(ItemTypes.ITEM,{
        dragSource:{
          beginDrag:function(component){return{
              item:{
                name: component.props.name
              }};}}});}},

  render:function(){return(<li className='item'{...this.dragSourceFor(ItemTypes.ITEM)}>{this.props.name}</li>);}});

Next we define the component we can drop objects into. The Bin component has a list of dropped items in its state, and an addItem method which takes the name of an item to add to that list.

varBin=React.createClass({
  mixins:[DragDropMixin],

  getInitialState:function(){return{ items:[]};},

  addItem:function(name){
    clone =this.state.items.slice(0);
    clone.push(name);this.setState({ items: clone });},

Now we register the dropTarget function, which calls addItem when an object
is dropped into the bin:

statics:{
    configureDragDrop:function(register){register(ItemTypes.ITEM,{
        dropTarget:{
          acceptDrop:function(component, item){
            component.addItem(item.name);}}});}},

Here we have the render function. We look at the component’s drop state to see whether:

  • Nothing is happening.
  • A droppable object is being dragged.
  • A droppable object hsa been dragged over the component.

We use this to change the component’s class name, then later we’ll use CSS to style it.

We also query the component’s drop state to determine whether the text on the bin should read “Release to drop: or “Drag item here”.

render:function()
   {const dropState =this.getDropState(ItemTypes.ITEM);
var stateClass ='none';
if(dropState.isHovering){
      stateClass ='hovering';
}elseif(dropState.isDragging){
      stateClass ='dragging';
}

const dropped =this.state.items.map(function(name){
     return<li>{name}</li>;
});
return(
     <div className={'bin bin-state-'+ stateClass}
     {...this.dropTargetFor(ItemTypes.ITEM)}>
     {dropState.isHovering ?
         'Release to drop':
         'Drag item here'}
     <ul className="dropped">
          {dropped}
     </ul>
     </div>
);
}
});

Finally, we create a small container object for this example and add some example items:


var Container=React.createClass({
  render:function(){
     return(
         <div>
              <Bin/>
              <ul className='items'>
                   <Item name='Glass'/>
                   <Item name='Banana'/>
                   <Item name='Paper'/>
              </ul>
         </div>
       );
   }
});
React.render(<Container/>,
    document.body
);

Style
Now it’s time to add some CSS.
First, some general style:

body {
    margin:0;
    padding:0;
    min-height:100vh;

    font-family:'Helvetica Neue',Helvetica,Arial, sans-serif;}

Now we make the bin a big square in the middle:

.bin {
    width:300px;
    margin:35pxauto;
    padding:45px;

    color: white;
    font-size:2em;
    text-align: center;

    border-radius:5px;}

We used CSS classes to mark up the different states of the bin, so now let’s use
those to change the color of the bin to match the state:

.bin-state-none {
    background-color:#34495E;}.bin-state-dragging {
    background-color:#E98B39;}.bin-state-hovering {
    background-color:#2ECC71;}

Since we show a list of items that have been dropped inside the bin, let’s style
that:

.dropped {
    margin:20px0;
    padding:0;
}
.dropped li {
    list-style-type: none;
    font-size:0.6em;}

And finally, the items that can be dropped:

.items {
    padding:0;
    text-align: center;
}

.item {
    display:inline-block;
    padding:20px;
    margin:25px10px;

    border:2px solid #E74C3C;
}

-By
Nitin Uttarwar
Helical It Solution

What is Node.js?

What is Node.js?

A lot of the confusion for newcomers to Node is misunderstanding exactly what it is. The description on nodejs.org definitely doesn’t help.
An important thing to realize is that Node is not a webserver. By itself it doesn’t do anything. It doesn’t work like Apache. There is no config file where you point it to you HTML files. If you want it to be a HTTP server, you have to write an HTTP server (with the help of its built-in libraries). Node.js is just another way to execute code on your computer. It is simply a JavaScript runtime.

Installing Node
Node.js is very easy to install. If you’re using Windows or Mac, installers are available on the download page.

I’ve Installed Node, now what?
Once installed you’ll have access to a new command called “node”. You can use the node command in two different ways. The first is with no arguments. This will open an interactive shell (REPL: read-eval-print-loop) where you can execute raw JavaScript code.

$ node
> console.log('Hello World');
Hello World
undefined

In the above example I typed “console.log(‘Hello World’)” into the shell and hit enter. Node will then execute that code and we can see our logged message. It also prints “undefined” because it displays the return value of each command and console.log doesn’t return anything.
The other way to run Node is by providing it a JavaScript file to execute. This is almost always how you’ll be using it.
hello.js
In hello.js i have return: console.log(‘Hello World’);

$ node hello.js
Hello World

In this example, I moved the console.log message into a file then passed that file to the node command as an argument. Node then runs the JavaScript in that file and prints “Hello World”.

In next blog i will write how to use NPM(Node package Manager) with node.js.

-By
Nitin Uttarwar
Helical It Solution