拖放问题jquery
drag and drop issue jquery
我有下面的代码使用脚本,我正在使东西可拖放。目前我有两件可拖拽的内容,两个地方,他们可以被丢弃,如果正确,那么系统会改变,说正确,我想知道如果有离开,我将能够只是创建HTMLdiv和代码运行,并匹配可拖拽到可拉。我有一个非技术背景的人,有基本的HTML知识,所以他们现在如何添加div和删除它们,但他们能够处理脚本,我想知道,如果我有ID 1-10的可拖动内容和相同的1-10,所以ID 1可拖动只能添加到ID一个可拉。
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="hhtps:/resources/demos/style.css">
<style>
#droppable,#droppable2 { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
</style>
<script>
$(function() {
$( "#draggable, #draggable2" ).draggable();
$( "#droppable" ).droppable({
accept: "#draggable",
drop: function( event, ui ) {
$( this )
.removeClass("ui-widget-header")
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
},
out: function( event, ui ) {
$( this ).removeClass( "ui-state-highlight" ).addClass( "ui-widget-header" )
.find( "p" )
.html( "accept" );
}
});
$( "#droppable2" ).droppable({
accept: "#draggable2",
drop: function( event, ui ) {
$( this )
.removeClass("ui-widget-header")
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
},
out: function( event, ui ) {
$( this ).removeClass( "ui-state-highlight" ).addClass( "ui-widget-header" )
.find( "p" )
.html( "accept" );
}
});
});
</script>
<div id="draggable2" class="ui-widget-content">
<p>I'm draggable but can't be dropped</p>
</div>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>accept: '#draggable'</p>
</div>
<div id="droppable2" class="ui-widget-header">
<p>accept: '#draggable2'</p>
</div>
您需要避免使用HTML id
,并开始使用类。下面是如何做到这一点的一个工作示例:
<div id="draggable_2" class="ui-widget-content draggable-item">
<p>draggable_2</p>
</div>
<div id="draggable" class="ui-widget-content draggable-item">
<p>draggable</p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable">
<p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_2">
<p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_3">
<p></p>
</div>
javascript:
$(function () {
$(".draggable-item").draggable();
$('.droppable-item').each(function (i, ele) {
// Gets the accepted from the HTML property "data-accept"
var accept = $(this).data('accept');
// This is just to show what the item accepts. you can remove it.
$(this).find('p').text('accepts: ' + accept);
// Init the jQuery UI droppable()
$(this).droppable({
accept: accept,
drop: function (event, ui) {
$(this)
.removeClass("ui-widget-header")
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
},
out: function (event, ui) {
$(this).removeClass("ui-state-highlight").addClass("ui-widget-header")
.find("p")
.html("accept: " + accept);
}
});
});
});
如果我理解正确的话,你希望每个可拖拽的div都是可拖拽的,而不是其他可拖拽的div。
您已经通过在代码中为每个droppable
添加accept: "#draggable"
实现了这一点。
您可以添加这行额外的代码,这样,如果您的可拖放对象被放到它的可拖放对象之外的任何地方,它将返回到它的可拖放对象。$( "#draggable, #draggable2" ).draggable({ revert: "invalid" });
这段代码可以缩短,如果你添加相同的类(如class=draggables
到每个可拖动的html元素,然后你可以使用$( ".draggables" ).draggable({ revert: "invalid" });
标记它们。
下面是一个示例。
相关文章:
- 带有slideUp/Down和clearQueue的jQuery问题
- html代码没有运行jquery问题
- 使用jquery问题将文本附加到文本区域
- 当变量中的.find()项有多个匹配项时,jQuery问题
- 由于jQuery问题,在实现Disqus插件时出现问题
- 在jquery问题中设置值
- 基本有类 jquery 问题
- 使用最接近查找文本输入的JQuery问题
- css上的Jquery问题
- 使用 jQuery 问题验证和提交表单
- 循环每个 jQuery 问题
- insertBefore() 一个 iframe jquery 问题
- Magento - 原型.js和jQuery问题 - 添加到购物车按钮
- 谷歌浏览器jQuery问题
- IE 中止插件脚本会导致现场出现 JQuery 问题
- 在 jquery 问题中加载更多选项
- Javascript - 使用 jQuery 问题选择选项
- 使用两个函数时出现 Jquery 问题
- jquery问题 - 它不会相应地改变它
- Jquery问题在Firefox和IE中,但不是Chrome