Search code examples
jquerydraggablecollision

Is there a working version of JQuery UI Draggable Collision plugin with jQuery 3?

Here is this plugin: https://sourceforge.net/projects/jquidragcollide/

Sadly, this not works with jQuery 3 and the latest UI version. Is there any modded version, that works?

Update: I try use this plugin with jQuery 3.3.1 and UI 1.12.1.

Here is my code:

<style>
    .pin {
      width: 100px;
      height: 100px;
      background-color: #65C02F;
      margin: 7px;
      border-radius: 0px;
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      transition: box-shadow 0.2s;
    }

    .pin.placed.boundary {
      box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.4);
      -moz-box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.4);
      -webkit-box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.4);
    }
</style>



    <script src="jquery-3.3.1.min.js"></script>
    <script src="jquery-ui-1.12.1.js"></script>
    <script src="jquery-collision.min.js"></script>
    <script src="jquery-ui-draggable-collision.js"></script>

<script>
// Example
$( function() {
// make pins draggable (using jQuery UI)
$(".pin").draggable({

  // apply collision effect (using collision plugin above)
  obstacle: ".placed",
  preventCollision: true,

  // optional, snap to pixel grid (using jQuery UI)
 // grid: [113,109],

  // animate on start of drag (using jQuery UI)
  start: function(e, ui) {
      $(this).removeClass('placed'),
      $('.placed').addClass('boundary');
  },

  // animate on end of drag (using jQuery UI)
  stop: function(e, ui) {
      $(this).addClass('placed'),
      $('.placed').removeClass('boundary');
  }
});
        });
</script>

<div class="pin"></div>
<div class="pin"></div>
<div class="pin"></div>
<div class="pin"></div>

I got the following error:

jquery-3.3.1.min.js:2 Uncaught TypeError: Cannot read property 'options' of undefined
    at w.fn.init.handleInit (jquery-ui-draggable-collision.js:353)
    at w.fn.init.create (jquery-ui-draggable-collision.js:54)
    at Object.call (jquery-ui-1.12.1.js:1965)
    at $.<computed>.<computed>._trigger (jquery-ui-1.12.1.js:2740)
    at $.<computed>.<computed>._trigger (jquery-ui-1.12.1.js:144)
    at $.<computed>.<computed>._createWidget (jquery-ui-1.12.1.js:347)
    at new $.<computed>.<computed> (jquery-ui-1.12.1.js:99)
    at HTMLDivElement.<anonymous> (jquery-ui-1.12.1.js:281)
    at Function.each (jquery-3.3.1.min.js:2)
    at w.fn.init.each (jquery-3.3.1.min.js:2)

jquery-ui-draggable-collision.js, line: 53-59 lines:

$.ui.plugin.add( "draggable", "obstacle", {
    create: function(event,ui){       handleInit   .call( this, event, ui ); },
    start: function(event,ui){        handleStart  .call( this, event, ui ); } ,
    drag:  function(event,ui){ return handleCollide.call( this, event, ui ); } ,
    stop:  function(event,ui){        handleCollide.call( this, event, ui );
                                      handleStop   .call( this, event, ui ); }
  });

jquery-ui-draggable-collision.js, line: 350-354 lines:

function handleInit( event, ui, type )
  {
    var w = $(this).data("draggable");
    var o = w.options;
  }

Thanks for help.

Solution

  • So, I found the solution, that work with the latest version of jQuery and its latest UI.

    I wrote the method, what have to do step by step. With these the plugin will be useful and work properly. (I didn't test any function, only the draggable.)

    1. step: download the JQuery Collision plugin (required to run the draggable plugin), from here: https://sourceforge.net/projects/jquerycollision/

    2. step: download the JQuery UI Draggable Collision plugin, from the link above

    3. step: open the JQuery UI Draggable Collision js file (named: jquery-ui-draggable-collision.js)
    4. step: replace all $(this).data("draggable") string to $(this).data("uiDraggable") string
    5. step: rename the deprecated andSelf function to addBack function, on line 328.

    Ps. Spec. thanks to the members, those gave negatives, without them, it would not have been possible.