我正在做一個HTML/jQuery DnD專案。我希望可以拖動的圖片是這樣的,但是目標不接受它們。即使可以拖動,應該接受圖片的td元素也不接受任何東西。
我應該使用哪個版本的jQuery和jQueryUI?我還忘了/做錯了什么?謝謝你的回答。
。< ! DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">/span>
<html>
<head>
<title>/span>Tierspiel</title>/span>
< meta name="author" content="Freya Bremer">
<style>
body {
display: block;
}
.target {
width: 110px;
height: 110px;
border-width: 1px;
border-color: black;
border-style: solid;
margin-right: 1em;
margin-top: 1em;
empty-cell: 顯示。
border-collapse: separate;
border-spacing: 1 em;
}
table {
align: center;
}
td img { align: center; }
width: 110px;
height: 110px;
border-width: 1px;
border-color: black;
border-style: solid;
margin-right: 1em;
margin-top: 1em;
}
tr {
margin-right: 1em;
margin-top: 1em;
}
th {
color: #b00000;
font-weight: bold;
margin-right: 1em;
margin-top: 1em;
text-align: center;
}
[dragable=true] {
cursor: grab;
}
</style>>
<script type="text/javascript"/span> src="https://ajax. googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">/span></script>
<script type="text/javascript"/span> src="https://ajax. googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">/span>
init()。
function init() {
$(".tier").draggable()。
console.log("Tier draggable") 。
$(".target").droppable({
accept: ".tier",
容忍度。"觸摸"。
drop: checkclass
});
console.log("Target droppable"/span>)。
}
function checkclass() {
console.log("Checkclass l?uft"/span>)。
}
</script>>
</head>
< body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<p>Liebe Schüler,<br> Ihr kennt Euch ja once mit Tieren aus and habt auch schon gelernt, da? man Tiere in Klassen einteilt. <br>因此,我們來到了一個小游戲。<br>在這里,我看到了一些玩具的圖片,以及這些玩具所在的杯子。
<br> Ihr bitte nehmt the Bilder der Tiere in hand and zieht sie in die Klasse, <br> Ihr wi?t, da?s dazu geh?ren. <br>這里有3種通過的動物,包括哺乳動物、兩棲動物和爬行動物。
<br>我們也會為您提供幫助。
</p>Fangen we also an...
<p>下面是我們的客戶:</p>
<table align="center">/span>
<tr align="center"/span>>
<td><img src="tier1. jpg" draggable="true" class="tier"> </td>>
<td><img src="tier2. jpg" draggable="true" class="tier">。 </td>>
<td><img src="tier3. jpg" draggable="true" class="tier">。 </td>>
<tr align="center">/span>
<td><img src="tier4. jpg" draggable="true" class="tier">。 </td>>
<td><img src="tier5. jpg" draggable="true" class="tier">。 </td>>
<td><img src="tier6. jpg" draggable="true" class="tier"> </td>>
</tr>/span>
<tr align="center">
<td><img src="tier7. jpg" draggable="true" class="tier">。 </td>>
<td><img src="tier8. jpg" draggable="true" class="tier"> </td>>
<td><img src="tier9. jpg" draggable="true" class="tier">。 </td>>
</tr>/span>
</table>/span>
<p>Die Klassen brauchen wir auch noch. </p>這些都是他們的作品。
<table align="center">
<tr align="center"/span>>
<th align="center"/span>> S?ugetiere</th>。
<th align="center"/span>> Amphibien</th>。
<th align="center"/span>> Reptilien</th>。
</tr>/span>
<tr>/span>
<td class="target"/span> droppable="true"/span>> </td>>
<td class="target"/span> droppable="true"/span>> </td>>
<td class="target"/span> droppable="true"/span>> </td>>
</tr>/span>
<tr>/span>
<td class="target"/span>> </td>
<td class="target"/span>> </td>
<td class="target"/span>> </td>
</tr>/span>
<tr>/span>
<td class="target"/span>> </td>
<td class="target"/span>> </td>
<td class="target"/span>> </td>
</tr>/span>
</table>/span>
</body>
</html>/span>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
uj5u.com熱心網友回復:
你應該將droppable屬性改為data-droppable,因為前者是一個無效的屬性。在你做了這個改變之后,將$.droppable選擇器改為。.target[data-droppable="true"]。我也對draggable屬性做了這樣的處理,但這些并不是直接的問題,因為你從未利用過它們。
此外,我分別使用了3.3.1和1.12.1版本的jQuery和jQuery UI。這些是通過cdnjs提供的最新版本。
注意:我還創建了一個名為$.fn.centerOnDrop的jQuery插件函式,將可拖動的專案置于可拖動區域的中心。
(function($) {
$.fn.centerOnDrop = function(ui){
ui.draggable.position({
my: 'center',
at: 'center',
of: this,
using: function(pos) {
$(this).animate(pos, 200, 'linear') 。
}
});
};
})(jQuery)。
init()。
function init() {
$('.tier[data-draggable="true"]').draggable()。
console.log('Tier draggable')。
$('.target[data-droppable="true"]'/span>).droppable({
accept: '.tier',
容忍度。'touch',
drop: checkClass
});
console.log('Target droppable')。
}
function checkClass(event, ui) {
console.log('checkClass is running')。
$(this).centerOnDrop(ui)。
}
body {
display: block;
color: #000000;
background: #FFFFFF。
}
a,
a: visited,
a:active {
color: #FF0000;
}
.target {
width: 110px;
height: 110px;
border-width: 1px;
border-color: black;
border-style: solid;
margin-right: 1em;
margin-top: 1em;
empty-cell: 顯示。
border-collapse: separate;
border-spacing: 1 em;
}
table {
align: center;
}
td img { align: center; }
width: 110px;
height: 110px;
border-width: 1px;
border-color: black;
border-style: solid;
margin-right: 1em;
margin-top: 1em;
}
tr {
margin-right: 1em;
margin-top: 1em;
}
th {
color: #b00000;
font-weight: bold;
margin-right: 1em;
margin-top: 1em;
text-align: center;
}
[dragable=true] {
cursor: grab;
}
<link href="https://cdnjs. cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="styleheet"/>
<link href="https://cdnjs.cloudflare. com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" rel="styleheet"/>
<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<script src="https://cdnjs. cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>/span>
<p>Liebe Schüler,<br> Ihr kennt Euch ja once mit Tieren aus and habt auch schon gelernt, da? man Tiere in Klassen einteilt. <br>因此,我們來到了一個小游戲。<br>在這里,我看到了一些玩具的圖片,以及這些玩具所在的杯子。
歸屬。
<br> Ihr bitte nehmt the Bilder der Tiere in hand and zieht sie in die Klasse, <br> Ihr wi?t, da? she dazu geh?ren. <br>這里有3種通過的動物,包括哺乳動物、兩棲動物和爬行動物,<br>我知道這是最簡單的,不過
<br>我們也會為您提供幫助。
</p>Fangen we also an...
<p>下面是我們的客戶:</p>
<table align="center">/span>
<tr align="center"/span>>
<td><img src="https://via.placeholder.com/150? text=Tier 1" data-draggable="true" class="tier"> </td>>
<td><img src="https://via.placeholder.com/150? text=Tier 2" data-draggable="true" class="tier"> </td>>
<td><img src="https://via.placeholder.com/150? text=Tier 3" data-draggable="true" class="tier"> </td>>
</tr>/span>
<tr align="center">
<td><img src="https://via.placeholder.com/150? text=Tier 4" data-draggable="true" class="tier"> </td>>
<td><img src="https://via.placeholder.com/150? text=Tier 5" data-draggable="true" class="tier"> </td>>
<td><img src="https://via.placeholder.com/150? text=Tier 6" data-draggable="true" class="tier"> </td>>
</tr>/span>
<tr align="center">
<td><img src="https://via.placeholder.com/150? text=Tier 7" data-draggable="true" class="tier"> </td>>
<td><img src="https://via.placeholder.com/150? text=Tier 8" data-draggable="true" class="tier"> </td>>
<td><img src="https://via.placeholder.com/150? text=Tier 9" data-draggable="true" class="tier"> </td>>
</tr>/span>
</table>/span>
<p>Die Klassen brauchen wir auch noch. </p>這些都是他們的作品。
<table align="center">
<tr align="center"/span>>
<th align="center"/span>> 哺乳動物</th>。
<th align="center"/span>> 兩棲動物</th>。
<th align="center"/span>> 爬行動物</th>。
</tr>/span>
<tr>/span>
<td class="target" data-droppable="true"> </td>>
<td class="target"/span> data-droppable="true"/span>> </td>>
<td class="target"/span> data-droppable="true"/span>> </td>>
</tr>/span>
<tr>/span>
<td class="target"/span>> </td>
<td class="target"/span>> </td>
<td class="target"/span>> </td>
</tr>/span>
<tr>/span>
<td class="target"/span>> </td>
<td class="target"/span>> </td>
<td class="target"/span>> </td>
</tr>/span>
</table>/span>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
uj5u.com熱心網友回復:
請看下面的例子。
。$(function() {
$(".tier").draggable({
cursor: "grab"。
});
$(".target.droppable").droppable({
accept: ".tier",
容忍度。"觸摸"。
drop: function(evt, ui) {
ui.draggable.attr("style", "") 。 appendTo(this) 。
}
});
});
body {
display: block;
color: #000;
background-color: #fff;
}
.target {
width: 110px;
height: 110px;
border-width: 1px;
border-color: black;
border-style: solid;
margin-right: 1em;
margin-top: 1em;
empty-cell: 顯示。
border-collapse: separate;
border-spacing: 1 em;
}
table {
align: center;
}
td img { align: center; }
width: 110px;
height: 110px;
border-width: 1px;
border-color: black;
border-style: solid;
margin-right: 1em;
margin-top: 1em;
}
tr {
margin-right: 1em;
margin-top: 1em;
}
th {
color: #b00000;
font-weight: bold;
margin-right: 1em;
margin-top: 1em;
text-align: center;
}
< link rel="styleheet" href="/code. jquery.com/ui/1.12.1/themes/base/jquery-ui.css">/span>
<script src="https://code. jquery.com/jquery-1.12.4.js"></script>
<script src="https://code. jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Liebe Schüler,<br> Ihr kennt Euch ja once mit Tieren aus and habt auch schon gelernt, da? man Tiere in Klassen einteilt. <br>因此,我們來到了一個小游戲。<br>在這里,我看到了一些孩子的照片,以及這些孩子所在的班級
歸屬。
<br> Ihr bitte nehmt the Bilder der Tiere in hand and zieht sie in die Klasse, <br> Ihr wi?t, da? she dazu geh?ren. <br>這里有3種通過的動物,包括哺乳動物、兩棲動物和爬行動物,<br>我知道這是最簡單的,但是
<br>我們也會為您提供幫助。
</p>Fangen we also an...
<p>下面是我們的客戶:</p>
<table>/span>
<tr>
<td><img src="tier1. jpg" class="tier"></td>
<td><img src="tier2. jpg" class="tier"></td>
<td><img src="tier3. jpg" class="tier"></td>
</tr>/span>
<tr>/span>
<td><img src="tier4. jpg" class="tier"></td>
<td><img src="tier5. jpg" class="tier"></td>
<td><img src="tier6. jpg" class="tier"></td>
</tr>/span>
<tr>/span>
<td><img src="tier7. jpg" class="tier"></td>
<td><img src="tier8. jpg" class="tier"></td>
<td><img src="tier9. jpg" class="tier"></td>
</tr>/span>
</table>/span>
<p>Die Klassen brauchen wir auch noch. </p>這些都是他們的作品。
<table align="center">
<tr align="center"/span>>
<th align="center"/span>> S?ugetiere</th>。
<th align="center"/span>> Amphibien</th>。
<th align="center"/span>> Reptilien</th>。
</tr>/span>
<tr>/span>
<td class="target droppable"/span>> </td>>
<td class="target droppable"/span>> </td>>
<td class="target droppable"/span>> </td>>
</tr>/span>
<tr>/span>
<td class="target"/span>> </td>
<td class="target"/span>> </td>
<td class="target"/span>> </td>
</tr>/span>
<tr>/span>
<td class="target"/span>> </td>
<td class="target"/span>> </td>
<td class="target"/span>> </td>
</tr>/span>
</table>/span>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
Draggable將對該元素應用造型。在將其應用到Drop目標之前,通常最好先將其剝離。
關于演示,請參見https://jqueryui.com/droppable/#accepted-elements您可以看到這里使用的版本。我建議使用更現代的jQuery版本;然而這將是我建議的最低版本。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/319928.html
標籤:
上一篇:在ajax顯示值中顯示空
