Question

当我拖动可拖动元素并将其拖放到可放置区域时，我想向可拖动元素添加一个新类，以便我可以使用CSS更改其样式。这是我到目前为止所得到的：

<aside>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</aside>
<section></section>

＆＃13;

$(document).ready(function(){
	
	//Test 
    $("aside div").draggable({
		revert: "invalid",
		containment: "document",
		helper: "clone",
		cursor: "move"
	});
 
    $('section').droppable({
		accept: "aside div",
		activeClass: "ui-state-highlight",
		drop: function( event, ui ) {
			//valami
			alert('lol');
		}
    });
	
});

＆＃13;

aside {
    float:left;
    width:200px;
}

aside div {
    width:200px;
    height:100px;
    background:red;
    margin:0 0 10px 0;
}

section {
    float:right;
    width:400px;
    height:320px;
    background:green;
}

＆＃13;

<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<aside>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</aside>
<section></section>

＆＃13;

Answer 1

来自jQueryUi文档http://api.jqueryui.com/droppable/#event-over

over( event, ui )Type: dropover

将可接受的拖动拖动到droppable上时触发   （基于容忍选项）。

你可能对它的双重感兴趣

out( event, ui )Type: dropout

将已接受的拖动拖出拖放时触发   （基于容忍选项）。

如何使用可拖动元素检查是否达到了可放置区域？

1 个答案: