0
Я пытаюсь сделать страницу, которая может выбрать любого из керамического типа и строить свою стену, вы можете помочь мне, как я могу сделать Выбрасываются элементы автоматического выравнивания друг с другим я использую: http://code.jquery.com/jquery-1.9.1.js http://code.jquery.com/jquery-ui.jsJQuery Droppable элемент выравнивания по сетке
вот код:
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit',
revert: true
});
$("#droppable").droppable({
accept: '.drag',
activeClass: "drop-area",
drop: function (e, ui) {
if ($(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
x.draggable({
helper: 'original',
cursor: 'move',
//containment: '#droppable',
tolerance: 'fit',
drop: function (event, ui) {
$(ui.draggable).remove();
}
});
\t \t \t
\t \t \t
x.resizable({
maxHeight: $('#droppable').height(),
maxWidth: $('#droppable').width()
});
x.addClass('remove');
var el = $("<span><a href='Javascript:void(0)' class=\"xicon delete\" title=\"Remove\">X</a></span>");
$(el).insertAfter($(x.find('img')));
x.appendTo('#droppable');
$('.delete').on('click', function() {
$(this).parent().parent('span').remove();
});
$('.delete').parent().parent('span').dblclick(function() {
$(this).remove();
});
}
}
});
$("#remove-drag").droppable({
drop: function (event, ui) {
$(ui.draggable).remove();
},
hoverClass: "remove-drag-hover",
accept: '.remove'
});.col {
float: left;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
#col1 {
width: 200px;
height: auto;
border: 1px solid black;
}
img.drag {
width: 40px;
height: 40px;
position: relative;
}
#droppable {
width: 350px;
height: 340px;
border: 1px solid black;
}
.right {
float: right;
}
.left {
float: left;
}
.clear {
clear: both;
}
ul li {
list-style: none;
}
.drag-list img {
width: 80px;
vertical-align: middle;
cursor: move;
}
.drag-list ul {
margin: 0px;
padding: 0px;
}
.drag-list li {
margin-bottom: 5px;
}
.remove-drag-hover {
background-color: #ED4949 !important;
}
.drop-area {
background-color: #afd1b2;
}
.xicon {
margin-top: 4px;
position: absolute;
margin-left: -17px;
color: #FFF;
font: message-box;
text-decoration: none;
}
.xicon:hover {
background-color: #fff;
color: #000;
width: 13px;
height: 20px;
text-align: center;
}
.tip {
font-size: 12px;
clear: both;
}<div id="wrapper">
<div class="col" id="droppable"></div>
<div class="col" id="col1">
<div id="drag-list" class="drag-list">
<ul>
<li><span id="drag1" class="drag">
<img src="http://placehold.it/80x80/c9112d/fff&text=1" width="100%" height="100%" />
</span><span>Item 1</span>
</li>
<li><span id="drag2" class="drag">
<img src="http://placehold.it/80x80/E68500/fff&text=2" width="100%" height="100%" />
</span><span>Item 2</span>
</li>
<li><span id="drag3" class="drag">
<img src="http://placehold.it/80x80/00810C/fff&text=3" width="100%" height="100%" />
</span><span>Item 3</span>
</li>
<li>
<div id="remove-drag" style="width: 100%; height: 80px; background-color: #FF8B8B;">
<div style="color: #fff; font-size: 20px; text-align: center; padding-top: 20px;">Remove
<div class="tip">Drop here</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>