CODEWITHSUNDEEP
symfonywebpackwebpack-encore
Pierrick Rambaud
Pierrick Rambaud

Reputation: 2434

how to properly manage jquery-ui with webpack

I'm currently moving to webpack-encore on my symfony app and I'm struggling with the jquery-ui library.

in my first file app.js I wanted to use easing 

import $ from 'jquery';
import 'bootstrap';
import 'jquery-ui/ui/effect';


// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html, body').animate({
                scrollTop: (target.offset().top - 70)
            }, 1000, "easeInOutExpo");
            return false;
        }
    }
});

It has taken me some time to figure out that it was in jqueryui/ui/effect.js file....

now In my view.js I'd like to use draggable element : 

//css
import '../css/event.css';

//js 
import $ from 'jquery';
import 'bootstrap';
import 'jquery-ui/ui/plugin';

$("span[class='draggable']").draggable({
    snap : '.dropdown'
});

And of course it doesn't work I get a

ERROR: $("span[class='draggable']").draggable() is not a function

Is there a proper way to load all jquery-ui like in good all days ? with a simple

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

Upvotes: 1

Views: 2325

Answers (1)

Theva
Theva

Reputation: 948

This code is tested

Install jquery-ui ref: doc

$ npm install webpack-jquery-ui

and then

require('webpack-jquery-ui/draggable');

$( "#draggable" ).draggable();

Upvotes: 1

Related Questions