是否有jQueryUI可拖动冲突插件和jQuery3的工作版本?
下面是这个插件: 遗憾的是,这不适用于jQuery3和最新的UI版本。有没有可以使用的修改版本 更新: 我尝试在jQuery3.3.1和UI1.12.1中使用这个插件 这是我的密码:是否有jQueryUI可拖动冲突插件和jQuery3的工作版本?,jquery,draggable,collision,Jquery,Draggable,Collision,下面是这个插件: 遗憾的是,这不适用于jQuery3和最新的UI版本。有没有可以使用的修改版本 更新: 我尝试在jQuery3.3.1和UI1.12.1中使用这个插件 这是我的密码: <style> .pin { width: 100px; height: 100px; background-color: #65C02F; margin: 7px; border-radius: 0px; -moz-bo
<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-ui-draggable-collision.js,行:350-354行:
function handleInit( event, ui, type )
{
var w = $(this).data("draggable");
var o = w.options;
}
谢谢您的帮助。因此,我找到了一个解决方案,它可以与最新版本的jQuery及其最新UI一起工作 我写的方法,什么都要一步一步的做。有了这些插件将是有用的,并正常工作。(我没有测试任何函数,只测试了可拖动的函数。)
$.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 ); }
});
function handleInit( event, ui, type )
{
var w = $(this).data("draggable");
var o = w.options;
}