0
Я работаю с библиотекой называется REDIPS, что позволяет создать эффект перетаскивания настраиваемый и простой ....Работы с перетаскиванием 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>Щелкнув элемент хотел его вытянуть так, например, если это с etted занимать три области:
И когда вы добавляете элемент в области plotável он должен выглядеть следующим образом:
Я взял прочитанный на documentation available on the site, но по-прежнему трудно для меня создайте это логическое ....
Извините плохой английский, но не говорите по-английски свободно ...
так, это почти что. Мне нужно только создать способ, когда я нажимаю и перетаскиваю элемент и перетаскиваю его, он должен оставаться с дублирующимся представлением и бросать его в нижнюю область, он становится единственным элементом, каждый раз, когда я выбираю нижние элементы, перетаскиваю это все остальные, которые были созданы с этим – MarceloBoni
примерно так: http://jsfiddle.net/dvxokzLw/2/ – MarceloBoni
и образ, который мне нужен: http://i.stack.imgur.com/zc9ap.png – MarceloBoni