Limit by element doesn't work (Vue.js)

[adi518]

Using this with Vue. Any idea why?

Vue.directive('draggable', {
    bind: function(element) {
        const options = {
            limit: document.getElementById('unlock-slider'),
        };
        const draggable = new Draggable(element, options);
    }
})

And then in my template literal:

<div id="unlock-slider" class="unlock-slider">
    <div class="unlock-link">
        <img :src="signUpSlideButton"> &nbsp;&nbsp;
        <router-link to="/login">
            <b>login</b>
        </router-link>
        &nbsp;&nbsp;
        <img :src="signUpSlideButton">
    </div>
    <img class="unlock-key" :src="signingKeyNormal" v-draggable>
    <img class="unlock-lock" :src="signinLock">
</div>

I've seen the bound demo and it works nicely, so I'm assuming it's something within Vue, but I'm still pretty new to it.

[gonardfreeman]

Same problem without Vue, so its problem with indicating width of element, because in my case it nicely work with height, but dont want to drag with x axis, i found bad solution use limit object x: [0, x], y: [0, y], but then i can drag it out of container div. here some code to help:

let options = { limit: { x: [0, 870], y: [0, 403], }, limit: container, filterTarget: (e) => { if(e == dragg){ return true; }else{ return false; } }, onDragEnd: (drag, x, y) => { console.log('x=>',x,'y=>',y) } }
<div class="banners_image"> <div id="draggable"> <textarea></textarea> <div class="dragger"></div> </div> </div>

[gonardfreeman]

sorry! my bad! lookup at your code and findout what im do wrong) the problem was that im declare in css width of text area but not of dragable element, so dragable div was 100% width and there was 0 when you calculating scrollWidth and offsetWidth

[bcherny]

@adi518 @gonardfreeman is this issue resolved? If not, @adi518 please post a complete repro case and I'll take a look.