title: Working with drag-drop REDIPS
body: <p>I'm working with a library called <code>REDIPS</code> that lets you create a drag-drop effect customizable and simple....</p>
  
  <p>I'm trying to create a function that causes the element that is being moved is cloned more than once and is positioned to the left side of the main element...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(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 &lt; 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 &lt; 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 &lt; td.childNodes.length; i++) {
        cn = td.childNodes[i];
        if (cn.nodeName === 'DIV' &amp;&amp; cn.className.indexOf('drag') &gt; -1) {
          content += cn.id + '_';
        }
      }
      content = content.substring(0, content.length - 1);
      return content;
    };
  
    teste = function() {
      var k = 1;
      var tabela = '';
      tabela = '&lt;table&gt;';
      for (var i = 1; i &lt; 7; i++) {
        tabela += '&lt;tr&gt;';
        for (var j = 1; j &lt; 10; j++) {
          tabela += '&lt;td class="redips-drag containerDrop" id="td' + k + '"&gt;&lt;/td&gt;';
          k++;
        }
        tabela += '&lt;/tr&gt;';
      }
      tabela += '&lt;/table&gt;';
      document.getElementById('areaPlotar').innerHTML = tabela;
    };
  
    insertAfter = function(newNode, referenceNode) {
      referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    };
  
    teste();
    redipsInit();
  
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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&amp;oe=55E9DCAA&amp;__gda__=1445400103_eff89331b290b65ef933085385c89b93) no-repeat center;
    width: 20px;
    height: 20px;
    cursor: pointer;
    float: left;
    border: 1px rgb(89, 89, 89) solid;
    border-radius: 7px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://www.redips.net/my/preview/REDIPS_drag/redips-drag-min.js"&gt;&lt;/script&gt;
  &lt;div id="redips-drag"&gt;
    &lt;div id="selecionaveis" class="selecionaveis"&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td class="containerDrag"&gt;
            &lt;div id="drag-1" class="redips-drag redips-clone icon1"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td class="containerDrag"&gt;
            &lt;div id="drag-2" class="redips-drag redips-clone icon2"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td class="containerDrag"&gt;
            &lt;div id="drag-3" class="redips-drag redips-clone icon3"&gt;&lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="containerDrag"&gt;
            &lt;div id="drag-4" class="redips-drag redips-clone icon4"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td class="containerDrag"&gt;
            &lt;div id="drag-5" class="redips-drag redips-clone icon5"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td class="containerDrag"&gt;
            &lt;div id="drag-6" class="redips-drag redips-clone icon6"&gt;&lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="containerDrag"&gt;
            &lt;div id="drag-7" class="redips-drag redips-clone icon7"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td class="containerDrag"&gt;
            &lt;div id="drag-8" class="redips-drag redips-clone icon8"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td class="containerDrag"&gt;
            &lt;div id="drag-9" class="redips-drag redips-clone icon9"&gt;&lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
  
    &lt;/div&gt;
    &lt;div id="areaPlotar" class="areaPlotar"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Clicking the element wanted him to be pulled like that, for example if it is setted to occupy three areas:</p>
  
  <p><img src="https://i.stack.imgur.com/8t6aK.png" alt="inserir a descrição da imagem aqui"></p>
  
  <p>And when you add the element in plotável area it should look like:</p>
  
  <p><img src="https://i.stack.imgur.com/H8ySj.png" alt="inserir a descrição da imagem aqui"></p>
  
  <p>I took a read on <a href="http://www.redips.net/javascript/redips-drag-documentation/" rel="nofollow noreferrer">documentation available on the site</a> but still hard for me to create that logical ....</p>
  
  <p>Excuse the bad English, but do not speak English fluently...</p>