var opts = {
containment: "parent",
smartGuides: true,
appendGuideTo: '.drag:not(".selected")',
snapTolerance: 10,
beforeStart: function () {
var $this = $(this);
if (!$this.hasClass('selected')) {
$this.siblings('.selected').removeClass('selected');
$this.addClass('selected');
}
}
};
$('.container .drag')
.draggable(opts)
.resizable($.extend({ handles: 'all' }, opts ));
.container {
position: relative;
}
.drag {
position: absolute;
}
var opts = {
containment: "parent",
smartGuides: true,
appendGuideTo: '.drag:not(".selected")'
snapTolerance: 10,
beforeStart: function () {
var $this = $(this);
if (!$this.hasClass('selected')) {
$this.siblings('.selected').removeClass('selected');
$this.addClass('selected');
}
}
};
$('.container .drag')
.draggable($.extend({
multiple: true,
selected: '.selected'
}, opts))
.resizable($.extend({ handles: 'all' }, opts ));
.container {
position: relative;
}
.drag {
position: absolute;
}
.smart-guide {
border-color: black;
border-style: dashed;
}
var opts = {
containment: "parent",
smartGuides: true,
appendGuideTo: '.drag:not(".selected")'
guideClass: 'guide',
snap: '.snap-container',
snapTolerance: 10,
beforeStart: function () {
var $this = $(this);
if (!$this.hasClass('selected')) {
$this.siblings('.selected').removeClass('selected');
$this.addClass('selected');
}
}
};
$('.container .drag')
.draggable(opts)
.resizable($.extend({ handles: 'all' }, opts ));
.container {
position: relative;
}
.drag {
position: absolute;
}
.guide {
border-color: blue;
border-style: dotted;
}