1

I implemented Jquery UI draggable,droppable,selectable and resizable. My draggable implementation : 

Draggable: {
        init: function(el, options) {

            $(el).draggable(options, {
                scroll: false,
                snap: '.gridlines',
                snapTolerance: $('.grid').attr('data-size') / 2,
                containment: "parent",
                preventCollision : true,
                preventProtrusion : false,
                collisionVisualDebug : false
           });
}

Component css:

.component{
    border:solid 1px #a0a0a0;
    background: #a6cbf7; /* Old browsers */
    background: -moz-linear-gradient(top,  #a6cbf7 0%, #defdfd 51%, #a6cbf7 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #a6cbf7 0%,#defdfd 51%,#a6cbf7 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #a6cbf7 0%,#defdfd 51%,#a6cbf7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6cbf7', endColorstr='#a6cbf7',GradientType=0 ); /* IE6-9 */
    text-align:center;
}

For example if my parent have width 100px, height 50px and I d&d the child to bottom, the maximum top position what I can get is 48px or sometimes 47px and on right side 97px or 98px. Any idea how can I get top value 49px or 50px and left 99px or 100px based on my example?

FAndrew
  • 248
  • 4
  • 22
  • You appear to be missing a closing `}` in your function. Also, what type of CSS is being applied to your dragged element? Is there a border? padding? margin? Same question for the parent. – Twisty Sep 14 '16 at 16:30
  • Yes I am using border, I think because of it is the problem but I don`t know how to resolve – FAndrew Sep 16 '16 at 07:31

0 Answers0