I am trying to make an Custom HTML module which can allow droppable contents on my localhost
Please view the image for the result
I have installed the JQuery Easy extension and have enabled it as per the instruction
The code that I am trying to run is from https://jqueryui.com/droppable/#default
I have search and tried many way but i am unable to make it work Any advise??
Don't use the normal Custom HTML module that ships with Joomla. It will most likely remove or change your code. I have two suggestions, depending on what you're trying to do and how much coding experience you have:
1. Create your own module
By creating your own module, you have full control over when and where your scripts, styles and codes are loaded. Creating a basic module is easier than you might think, this tutorial is a good starting point.
2. Use Custom HTML Advanced
This little module is similar to the Custom HTML module, but it will not remove any of your code. You can add <script>, <style> and even PHP code.
Simply start by copying the source code from https://jqueryui.com/droppable/#default, (without the <head> and <body> tags), and publish your module. You might have to tweak the code a little to make it work and to make sure you don't load jQuery / jQuery UI twice. This depends on your current template and other settings.
Hope that helps.
You should make following settings in jQuery Easy to work:
Enable jQuery: jQuery + jQuery UI
Both versions for jQuery and jQuery Ui should match - for example 1.8
Make sure you have Theme for jQuery UI - this will ensure jQuery style sheet is loaded.
Remove any style declarations from code example posted in your question and make all of them inline like:
<div style="width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; background-color: #eeeaaa; display: inline-block;" id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div style=" width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; background-color: #eeeeee;" id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
Otherwise you will have <style> tags inside body section, which is not advisable - see here.
(You can place styles in a css file as well.)
Script should be modified slightly as per this advice:
<script>
jQuery(document).ready(function($) {
jQuery( "#draggable" ).draggable();
jQuery( "#droppable" ).droppable({
drop: function( event, ui ) {
jQuery( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
Script is OK to be included in the Custom HTML module even within div tags from Joomla.
Make sure your Joomla editor do not strips JS code when saving. Clean Joomla cache and reload. Check browser console for errors.
