Working with drag-drop REDIPS

Navigation
3

I'm working with a library called REDIPS that enables you to create a simple and customizable drag-drop effect.

I'm trying to create a function that causes the element being moved to be cloned more than once and is positioned to the left side of the parent element ... 

(function() {
  var redipsInit,
      getContent;

  redipsInit = function() {
    var num = 0,
        rd = REDIPS.drag;
    rd.init();
    rd.dropMode = 'single';
    rd.hover.colorTd = 'rgb(62, 255, 110)';
    rd.event.clicked = function() {
      if (rd.obj.id == 'drag-1' || rd.obj.id == 'drag-4') {
        for (var i = 0; i < 1; i++) {
          var mydiv = rd.obj;
          var div = document.createElement("div");
          insertAfter(div, mydiv);
          div.className = rd.obj.className;
          div.style.backgroundColor = rd.obj.style.backgroundColor;
        }
      } else if (rd.obj.id == 'drag-2' || rd.obj.id == 'drag-5' || rd.obj.id == 'drag-9') {
        for (var i = 0; i < 3; i++) {
          var mydiv = rd.obj;
          var div = document.createElement("div");
          insertAfter(div, mydiv);
          div.className = rd.obj.className;
          div.style.backgroundColor = rd.obj.style.backgroundColor;
        }
      }
    };
  }
  getContent = function(id) {
    var td = document.getElementById(id),
        content = '',
        cn, i;
    for (i = 0; i < td.childNodes.length; i++) {
      cn = td.childNodes[i];
      if (cn.nodeName === 'DIV' && cn.className.indexOf('drag') > -1) {
        content += cn.id + '_';
      }
    }
    content = content.substring(0, content.length - 1);
    return content;
  };

  teste = function() {
    var k = 1;
    var tabela = '';
    tabela = '<table>';
    for (var i = 1; i < 7; i++) {
      tabela += '<tr>';
      for (var j = 1; j < 10; j++) {
        tabela += '<td class="redips-drag containerDrop" id="td' + k + '"></td>';
        k++;
      }
      tabela += '</tr>';
    }
    tabela += '</table>';
    document.getElementById('areaPlotar').innerHTML = tabela;
  };

  insertAfter = function(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
  };

  teste();
  redipsInit();

})();
.containerDrag {
  width: 23px;
  height: 26px;
  border: 1px rgb(255, 255, 188) double;
  background: rgb(255, 255, 110);
}
.containerDrop {
  width: 23px;
  height: 26px;
  border: 1px rgb(140, 173, 188) double;
  background: rgb(10, 255, 255);
}
.icon1 {
  background: url(https://fbstatic-a.akamaihd.net/rsrc.php/yV/r/hzMapiNYYpW.ico) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon2 {
  background: url(http://img3.wikia.nocookie.net/__cb20130407235019/logopedia/images/1/13/YouTube_Favicon_2009.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon3 {
  background: url(http://www.correiodopovo.com.br/blogs/juremirmachado/wp-content/themes/ifeature/images/social/twitter.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon4 {
  background: url(http://socialmercosul.org/wp-content/themes/mercosul/imagens/instagram.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon5 {
  background: url(http://www.jodonto.com.br/_img/icone_msn_rodape_jodonto.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon6 {
  background: url(http://www.howto-outlook.com/pictures/signature_icons/skype-add.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon7 {
  background: url(http://www.pedroquintanilha.com.br/wp-content/plugins/custom-about-author/images/social_media/google_plus.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon8 {
  background: url(http://fabc.com.br/fabc/wp-content/themes/campus/assets/images/theme/social-icons/obox/linkedin-32.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon9 {
  background: url(https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xaf1/v/t1.0-1/p50x50/11148346_1038325069518441_1839972097583978647_n.jpg?oh=5a13d5720b8f67d33299139b88a00cb7&oe=55E9DCAA&__gda__=1445400103_eff89331b290b65ef933085385c89b93) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
<script src="http://www.redips.net/my/preview/REDIPS_drag/redips-drag-min.js"></script><divid="redips-drag">
  <div id="selecionaveis" class="selecionaveis">
    <table>
      <tr>
        <td class="containerDrag">
          <div id="drag-1" class="redips-drag redips-clone icon1"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-2" class="redips-drag redips-clone icon2"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-3" class="redips-drag redips-clone icon3"></div>
        </td>
      </tr>
      <tr>
        <td class="containerDrag">
          <div id="drag-4" class="redips-drag redips-clone icon4"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-5" class="redips-drag redips-clone icon5"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-6" class="redips-drag redips-clone icon6"></div>
        </td>
      </tr>
      <tr>
        <td class="containerDrag">
          <div id="drag-7" class="redips-drag redips-clone icon7"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-8" class="redips-drag redips-clone icon8"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-9" class="redips-drag redips-clone icon9"></div>
        </td>
      </tr>
    </table>

  </div>
  <div id="areaPlotar" class="areaPlotar"></div>
</div>

Clicking on the element wanted it to be pulled like this, for example if it is set to occupy three areas:

Andwhenaddingtheelementintheplottableareaitshouldlooklikethis:

I've read the documentation available on the site , but it's still tricky for me to create this logic. ...

    
asked by anonymous 29.06.2015 / 05:50

2 answers

4

I changed its clicked function, looking in the source code there is an event called cloned that is when you selected an icon and it is moving it. From this I created 2% with auxiliary% to clone the appearance of it and display from the sides.

Update

I think I got the result you want:

  • No div I create the clones one for each side.

Update 2

Fixed the 2 issues reported in the comments. 

(function() {
  var redipsInit,
      getContent;

  redipsInit = function() {
    var clonando = false;
    var num = 0,
        rd = REDIPS.drag;
    rd.init();
    rd.dropMode = 'single';
    rd.hover.colorTd = 'rgb(62, 255, 110)';
    rd.event.notMoved = function () { 
      removeClones(); 
    }
    rd.event.dropped = function () {
      removeClones();
      var div = rd.obj;
      clonando = true;
      var pos = rd.getPosition();
      pos[2]--;
      pos[5]--;
      if (pos[2] >= 0) {
        rd.moveObject({
          obj: rd.obj,
          clone: true,
          overwrite: true,
          target: pos
        });
      }
      pos[2] += 2;
      pos[5] += 2;
      if (pos[2] <= 8) {
        rd.moveObject({
          obj: rd.obj,
          clone: true,
          overwrite: true,
          target: pos
        });
      }
      clonando = false;
    }
    rd.event.clicked = function() {
      var ids = rd.obj.id.split("-"); 
      var idPrincipal = ids[0] + "-" + ids[1].substring(0, 3); 
      var divs = document.querySelectorAll("div[id^=" + idPrincipal + "]");
      console.log(divs);
      for (var i=0;i<divs.length;i++) if (divs[i] != rd.obj) rd.deleteObject(divs[i]);      
      
      criaClones();
    };
    rd.event.cloned = function() {
      var divs = document.querySelectorAll('.containerDrag > div');
      for (var i=0;i<divs.length;i++) { 
        while (divs[i].hasChildNodes()) {
          divs[i].removeChild(divs[i].lastChild);
        }
      }
    };

    var removeClones = function () {
      while (rd.obj.hasChildNodes()) {
        rd.obj.removeChild(rd.obj.lastChild);
      }
    };
    var criaClones = function () {
      var divClicado = rd.obj;
      if (!divClicado) {
        return 
      };
      var divAux = divClicado.cloneNode(0);
      divAux.style.top = "initial";
      divAux.style.left = "initial";
      divAux.style.position = "initial";
      var divAux2 = divAux.cloneNode(0);
      divAux.style.marginLeft = "29px";
      divAux.style.marginTop = "-1px";
      divAux2.style.marginLeft = "-29px";
      divAux2.style.marginTop = "-22px";
      divClicado.appendChild(divAux);
      divClicado.appendChild(divAux2);      
    };
  }
  getContent = function(id) {
    var td = document.getElementById(id),
        content = '',
        cn, i;
    for (i = 0; i < td.childNodes.length; i++) {
      cn = td.childNodes[i];
      if (cn.nodeName === 'DIV' && cn.className.indexOf('drag') > -1) {
        content += cn.id + '_';
      }
    }
    content = content.substring(0, content.length - 1);
    return content;
  };

  teste = function() {
    var k = 1;
    var tabela = '';
    tabela = '<table>';
    for (var i = 1; i < 7; i++) {
      tabela += '<tr>';
      for (var j = 1; j < 10; j++) {
        tabela += '<td class="redips-drag containerDrop" id="td' + k + '"></td>';
        k++;
      }
      tabela += '</tr>';
    }
    tabela += '</table>';
    document.getElementById('areaPlotar').innerHTML = tabela;
  };

  insertAfter = function(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
  };

  teste();
  redipsInit();
    

})();
.cloneTres {
  top: initial !important;
  left: initial !important;
  position: initial !important;
}

.containerDrag {
  width: 23px;
  height: 26px;
  border: 1px rgb(255, 255, 188) double;
  background: rgb(255, 255, 110);
}
.containerDrop {
  width: 23px;
  height: 26px;
  border: 1px rgb(140, 173, 188) double;
  background: rgb(10, 255, 255);
}
.icon1 {
  background: url(https://fbstatic-a.akamaihd.net/rsrc.php/yV/r/hzMapiNYYpW.ico) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon2 {
  background: url(http://img3.wikia.nocookie.net/__cb20130407235019/logopedia/images/1/13/YouTube_Favicon_2009.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon3 {
  background: url(http://www.correiodopovo.com.br/blogs/juremirmachado/wp-content/themes/ifeature/images/social/twitter.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon4 {
  background: url(http://socialmercosul.org/wp-content/themes/mercosul/imagens/instagram.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon5 {
  background: url(http://www.jodonto.com.br/_img/icone_msn_rodape_jodonto.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon6 {
  background: url(http://www.howto-outlook.com/pictures/signature_icons/skype-add.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon7 {
  background: url(http://www.pedroquintanilha.com.br/wp-content/plugins/custom-about-author/images/social_media/google_plus.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon8 {
  background: url(http://fabc.com.br/fabc/wp-content/themes/campus/assets/images/theme/social-icons/obox/linkedin-32.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon9 {
  background: url(https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xaf1/v/t1.0-1/p50x50/11148346_1038325069518441_1839972097583978647_n.jpg?oh=5a13d5720b8f67d33299139b88a00cb7&oe=55E9DCAA&__gda__=1445400103_eff89331b290b65ef933085385c89b93) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
<script src="http://www.redips.net/my/preview/REDIPS_drag/redips-drag-min.js"></script><divid="redips-drag">
  <div id="selecionaveis" class="selecionaveis">
    <table>
      <tr>
        <td class="containerDrag">
          <div id="drag-1" class="redips-drag redips-clone icon1"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-2" class="redips-drag redips-clone icon2"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-3" class="redips-drag redips-clone icon3"></div>
        </td>
      </tr>
      <tr>
        <td class="containerDrag">
          <div id="drag-4" class="redips-drag redips-clone icon4"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-5" class="redips-drag redips-clone icon5"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-6" class="redips-drag redips-clone icon6"></div>
        </td>
      </tr>
      <tr>
        <td class="containerDrag">
          <div id="drag-7" class="redips-drag redips-clone icon7"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-8" class="redips-drag redips-clone icon8"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-9" class="redips-drag redips-clone icon9"></div>
        </td>
      </tr>
    </table>

  </div>
  <div id="areaPlotar" class="areaPlotar"></div>
</div>
    
02.07.2015 / 01:37
1

Thanks to the help obtained by @MaiconCarraro's friend and the creator of the Redips-DRAG @dbunic plugin obtained here in the SO I was able to solve the problem. here is the full code if it ever comes in handy for anyone: 

"use strict";

var redipsInit,
    areaPlotMusica,
    showContent,
    getContent,
    criaClones,
    removeClones;

areaPlotMusica = function (){
  var k = 1; var tabela = '';
  tabela = '<table id="table0">';
  for (var i = 0; i < 10; i++) {
    tabela += '<tr class="containerFaixa">';
    for (var j = 0; j < 10; j++) {
      tabela += '<td class="redips-drag containerDrop" id="td'+k+'"></td>';
      k++;
    }
    tabela += '</tr>';
  }
  tabela += '</table>';
  document.getElementById('areaPlotar').innerHTML = tabela;
}

redipsInit = function () {
  areaPlotMusica();
  var rd = REDIPS.drag;
  rd.dropMode = 'single';
  rd.hover.colorTd = 'rgb(159, 176, 183)';
  rd.init();

  rd.event.moved = function() {        
    var ids = rd.obj.id;
    if(ids.length > 9) ids = ids.substring(0, 10);
    if(ids.length < 9) return;
    var divs = document.querySelectorAll("div[id^=" + ids + "]");
    for (var i=0;i<divs.length;i++) if (divs[i] != rd.obj) rd.deleteObject(divs[i]);
    criaClones(rd.obj);
    showContent();
  };

  rd.event.dropped = function (tc) {
    var ids = rd.obj.id.split("-");
    var id = ids[2].substring(0, 1);
    if(id < 4){

    }else if(id > 3 && id < 7){
      var n1 = tc.nextElementSibling,
          objNew;
      removeClones(rd.obj);

      if (n1) {
        objNew = rd.cloneObject(rd.obj);
        n1.appendChild(objNew);
      }
    }else{
      var n1 = tc.nextElementSibling, // first cell next to dropped element
          n2,                         // second cell next to dropped element
          n3,                         // thirt cell next to dropped element
          objNew;                     // cloned element
      removeClones(rd.obj);

      if (n1) {
        n2 = n1.nextElementSibling,      // try to set reference to second cell
          objNew = rd.cloneObject(rd.obj); // clone itself
        n1.appendChild(objNew);          // append to first cell
      }
      if (n2) {
        n3 = n2.nextElementSibling,      // try to set reference to second cell
          objNew = rd.cloneObject(rd.obj); // clone itself
        n2.appendChild(objNew);          // append to second cell
      }
      if (n3) {
        objNew = rd.cloneObject(rd.obj); // clone itself
        n3.appendChild(objNew);          // append to second cell
      }
    }

    showContent();
  };
};

showContent = function () {
  var log = '';
  var message = document.getElementById('message');
  for ( var i = 1; i <= 100; i++) {
    log += 'td'+i+' = ' + getContent('td'+i) + '<br>';
  }

  message.innerHTML = log;
};

getContent = function (id) {
  var td = document.getElementById(id),
      content = '',
      cn, i;
  for (i = 0; i < td.childNodes.length; i++) {
    cn = td.childNodes[i];
    if (cn.nodeName === 'DIV' && cn.className.indexOf('drag') > -1) { 
      content += cn.id + '_';
    }
  }
  content = content.substring(0, content.length - 1);
  return content;
};

criaClones = function (divClicado) {
  var ids = divClicado.id.split("-");
  var id = ids[2].substring(0, 1);
  if(id < 4){

  }else if(id > 3 && id < 7){
    var divAux = divClicado.cloneNode(0);
    divAux.style.top = "initial";
    divAux.style.left = "initial";
    divAux.style.position = "initial";
    divAux.style.marginLeft = "28px";
    divAux.style.marginTop = "-1px";
    divClicado.appendChild(divAux);
  }else{
    var divAux = divClicado.cloneNode(0);
    divAux.style.top = "initial";
    divAux.style.left = "initial";
    divAux.style.position = "initial";
    var divAux2 = divAux.cloneNode(0);
    divAux.style.marginLeft = "28px";
    divAux.style.marginTop = "-1px";
    divAux2.style.marginLeft = "57px";
    divAux2.style.marginTop = "-22px";
    var divAux3 = divAux2.cloneNode(0);
    divAux3.style.marginLeft = "86px";
    divAux3.style.marginTop = "-22px";
    divClicado.appendChild(divAux);
    divClicado.appendChild(divAux2);
    divClicado.appendChild(divAux3);
  }

};

// remove duplicate element 
removeClones = function (div) {
  while (div.hasChildNodes()) {
    div.removeChild(div.lastChild);
  }
};

// add onload event listener
if (window.addEventListener) {
  window.addEventListener('load', redipsInit, false);
}else if (window.attachEvent) {
  window.attachEvent('onload', redipsInit);
}
.containerDrag {
  width: 23px;
  height: 26px;
  border: 1px rgb(255, 255, 188) double;
  background: rgb(255, 255, 110);
}

.containerMessage {
  position: absolute;
  overflow: auto;
  height: 310px;
  width: 250px;
  left: 50%; 
  background: rgb(255, 255, 110);
}

.containerDrop {
  width: 23px;
  height: 26px;
  border: 1px rgb(140, 173, 188) double;
  background: rgb(10, 255, 255);
}

.icon1 {
  background: url(http://www.1914-1918-online.net/_rechte_seite/social_media_icons/icon_facebook_20.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}

.icon2 {
  background: url(http://www.gaba-network.org/Files/Images/Buttons/SocialMedia_youtube_20x20.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
.icon3 {
  background: url(http://www.correiodopovo.com.br/blogs/juremirmachado/wp-content/themes/ifeature/images/social/twitter.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}

.icon4 {
  background: url(http://socialmercosul.org/wp-content/themes/mercosul/imagens/instagram.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}

.icon5 {
  background: url(http://www.jodonto.com.br/_img/icone_msn_rodape_jodonto.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}

.icon6 {
  background: url(http://www.howto-outlook.com/pictures/signature_icons/skype-add.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}

.icon7 {
  background: url(http://www.pedroquintanilha.com.br/wp-content/plugins/custom-about-author/images/social_media/google_plus.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}

.icon8 {
  background: url(http://fabc.com.br/fabc/wp-content/themes/campus/assets/images/theme/social-icons/obox/linkedin-32.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}

.icon9 {
  background: url(http://www.myiconfinder.com/uploads/iconsets/20-20-556599c9fb64134dd4c984c6a08b949a.png) no-repeat center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  float: left;
  border: 1px rgb(89, 89, 89) solid;
  border-radius: 7px;
}
<script src="http://www.redips.net/my/preview/REDIPS_drag/redips-drag-min.js"></script><divid="redips-drag">
  <div id="selecionaveis" class="selecionaveis">
    <table>
      <tr>
        <td class="containerDrag">
          <div id="drag-1-1" class="redips-drag redips-clone icon1"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-1-2" class="redips-drag redips-clone icon2"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-1-3" class="redips-drag redips-clone icon3"></div>
        </td>
      </tr>
      <tr>
        <td class="containerDrag">
          <div id="drag-1-4" class="redips-drag redips-clone icon4"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-1-5" class="redips-drag redips-clone icon5"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-1-6" class="redips-drag redips-clone icon6"></div>
        </td>
      </tr>
      <tr>
        <td class="containerDrag">
          <div id="drag-1-7" class="redips-drag redips-clone icon7"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-1-8" class="redips-drag redips-clone icon8"></div>
        </td>
        <td class="containerDrag">
          <div id="drag-1-9" class="redips-drag redips-clone icon9"></div>
        </td>
      </tr>
    </table>
<div id="message" class="containerMessage"></div>
  </div>
  <div id="areaPlotar" class="areaPlotar"></div>
</div>
    
31.07.2015 / 15:32
Create file with execute permission Media Query for PC