Hi
Ive been struggling to figure this out for about 3 days now. I am creating columns dynamically that are added to a container (when user clicks the add button). Using the draggable plugin I have made them draggable (only horizontally). Everything works fine but what I am stuck with is when a column is dragged and dropped on another then (the dragged column) should be placed either to the left or right of the target column. This is my code thus far. Any help will be greatly appreciated.
Draggable.create($element, { // use $element instead of ".column". This is declared at the top ^^^ and refers to this specific instance of 'column'
type: "x",
edgeResistance: 0.65,
throwProps: true,
bounds: {left: 0},
lockAxis: true,
autoscroll: 1,
trigger: $element.find(".drag-handle"),// Use jQueryLite (built in to Angular) to find this column's drag handle
onPress: function () {
columnList = $(".column:not(#" + $element.attr("id") + ")").toArray();
initialCoords = ($element.css("left"));
console.log(initialCoords);
},
onDragEnd: function (e) {
for(var i = 0; i < columnList.length; i++){
if(this.hitTest(columnList[i], overlapThreshold)) {
var jqueryColumn = $(columnList[i]);
var objectTwoCoord = jqueryColumn.position();
console.log(jqueryColumn);
TweenLite.to(this.target, 0.5, {x: initialCoords });
}
}
}
});
