Вот этот плагин: https://sourceforge.net/projects/jquidragcollide/
К сожалению, это не работает с jQuery 3 и последней версией пользовательского интерфейса. Есть ли какая-либо измененная версия, которая работает?
Обновление: я пытаюсь использовать этот плагин с jQuery 3.3.1 и UI 1.12.1.
Вот мой код:
<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>
Я получил следующую ошибку:
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, строка: 53-59 строк:
$.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, строка: 350-354 строки:
function handleInit( event, ui, type )
{
var w = $(this).data("draggable");
var o = w.options;
}
Спасибо за помощь.