jQuery可拖动函数在PrimeFaces JSF页面中导致错误

Question

I am using jQuery in JSF to make a drag and drop feature. The draggable function works fine independently, but when out in a JSF page, it throws an error!

Here is the code:

function attachClickEvents() { 
    $(".circle").on('click', function(event){ 
        event.stopPropagation(); 
        event.stopImmediatePropagation(); 

        $(".circle").each(function(){ 
            $(this).removeClass("selected"); 
        }); 

        $(this).addClass("selected"); 
        // $(this).draggable({containment:'parent',drag: handleDragStop}); 
        $(this).draggable({containment:$(this).parent().parent().parent()}); 
    });     
}

What is surprising is, $(this).addClass("selected"); piece works fine and the appearance of that marker is changed.

But the next statement throws an error:

Uncaught TypeError: $(...).draggable is not a function

I am using the JSF recommended way of including jQuery:

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />

What's wrong?

Answer 1

the problem was I was explicitly adding a jquery version in my code. Also another developer who was working independently also included another version of jquery. All 3 were conflicting. I removed explicit inclusion of jquery and included the one provided by prime faces , it started working. Always make sure you dont have multiple inclusion of jquery of different versions.Hope this helps some one