拖放问题jQuery [英] drag and drop issue jquery
问题描述
我有以下使用脚本的代码,这些脚本使东西可拖放.目前,我有两段可拖动内容,如果可以的话,可以将其放在两个位置,如果正确,则系统将更改并说正确,我想知道是否还有我可以创建HTML div并运行代码通过并将可拖动对象与可拖放对象匹配.我的人员具有非技术背景,具有基本的HTML知识,所以您现在如何添加div并将其删除,但是他们能够处理脚本,我想知道,如果我的ID为1-10可拖动的内容与可放置的1-10的内容相同,因此只能将ID 1可拖动的ID添加到ID 1的可放置的ID.
I have the code below using the script i am making stuff draggable and droppable. currently i have two pieces for draggable content, and two place they can be dropped if correct then the system will change and say correct, I would like to know if there is away that i would be able just create the HTML divs and the code runs through and matches the draggable to the dropable. I have people that have a non-technical backdround, have basic HTML knowledge so thy now how to add divs and remove them but they are able to deal with script, i would like to know, if i had ID of 1-10 for the draggable content and the same for the dropable 1-10 so id 1 draggable can only be added to id one droppable.
<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
并开始使用类.以下是使用工作示例的方法:
You will need to avoid using HTML id
for this and start using classes. Here is how to do that, with a working example:
您的HTML:
<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:
Your 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);
}
});
});
});
这篇关于拖放问题jQuery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!