Jump to content


  • Posts

  • Joined

  • Last visited

zohair.raza.pa's Achievements



  1. Hi Thanks for the quick response. I've had a look at your example and all the others. However they were not useful for me. To be fair this is the first time im doing front end development and literally the learning curve is huge. My situation is that I have columns that are added dynamically into a container (whenever the columns are added the containers get bigger and has an infinite scroll). I need to be able to drag the columns (only horizontally and place them wherever I like), however if there is a case when a columns overlaps another then the column should be placed to the left or right of the target column. This is very similar to the way twitter has done it. I know this is a nooob question but I am a noob at angular, js, html and css. Any help will be greatly appreciated. EDIT: The container being used is not a list or a grid
  2. 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 }); } } } });