javascript - 使用拖放 REDIPS

Question

我正在使用一个名为 REDIPS 的库，它可以让您创建可自定义且简单的拖放效果....

我正在尝试创建一个函数，该函数会导致被移动的元素被多次克隆并定位到主元素的左侧...

(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>
<div id="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>

点击元素想让他被拉成那样，比如设置占据三个区域:

当您在 plotável 区域中添加元素时，它应该如下所示:

我阅读了 documentation available on the site但我仍然很难创造出那种合乎逻辑的....

请原谅英语不好，但不要说流利的英语......

Answer 1

我是 REDIPS.drag 的开发者，请看下面的 jsFiddle 演示:

http://jsfiddle.net/dvxokzLw/1/

演示展示了如何在目标单元格旁边克隆放置的 DIV 元素。 JavaScript 代码很简单，应该是继续开发的良好基础:

// define event handler after cloned element is dropped
// tc is target cell reference (where element is dropped)
rd.event.clonedDropped = function (tc) {
    var n1 = tc.nextElementSibling, // first cell next to dropped element
        n2,                         // second cell next to dropped element
        objNew;                     // cloned element
   // clone first element (if next cell exists)
   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
   }
   // clone second element (if second cell exists)
   if (n2) {
      objNew = rd.cloneObject(rd.obj); // clone itself
      n2.appendChild(objNew);          // append to second cell
   }
};

如果您需要进一步的帮助，请随时与我联系。

干杯!