function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Thomas MilasThomas Milas 

jQuery Drag and Drop when using j$

I'm trying to toubleshoot my issues with drag and drop and the jQuery seems to work when the no conflict is like this and showHeader is true.

$ = jQuery.noConflict();

 If I use:

 

j$ = jQuery.noConflict();

 Like it's listed in: http://wiki.developerforce.com/page/Developing_Apps_with_jQuery

 

What would cause this? I'm using code from the jQuery Site below:

 

<apex:page showHeader="true">
  
  <title>jQuery UI Droppable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <apex:includeScript value="http://code.jquery.com/jquery-1.9.1.js"  />
  <apex:includeScript value="http://code.jquery.com/ui/1.10.3/jquery-ui.js"  />
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  </style>
  <script>
    $ = jQuery.noConflict();
      $(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
            alert("Dropped");
      }
    });
  });
  </script>

<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
 
<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>
 
 


</apex:page>

 

Thomas MilasThomas Milas

By looking at some old DF implementations I found that If I use the "script src" tag instead of the "apex:includeScript value" tag I'd get better results.