Question

我（与我的一个学生合作）使用jqueryui获取被删除对象的属性。被删除的对象是图像。所有图像都设置为可通过单个jquery调用draggable进行拖动。

这里的挑战实际上是让对象的任何属性被丢弃在放置目标上。 drop事件处理程序工作正常（我可以很容易地警告它） - 但是无法获取被删除对象的任何属性。

此代码也可在http://jsfiddle.net/reaglin/FUvT8/4/

获取

注意 - 实际操作发生在

时

（1）调用draggable（）使对象可以放置（2）创建图像并将其添加到文档正文中（3）调用handleDropEvent。

这是使用扑克牌的一个很好的例子 - 但这个例子使用Dr. Who字符。

$ (init);

function image(id, image1) {
this.id = id;
this.image1 = image1;
}

$('#deal').click(function () {dealAll(
    dealCard(randomCard()));
});

$(function() {
 $( "#draggable" ).draggable({ containment: "#left"});
  });

function init() {
  $('.drop').droppable( {
    drop: handleDropEvent
 } ); 
 $("img").draggable();
}
// global variables
var cardsInDeck = new Array();
var numberOfCardsInDeck = 15;
cardsInDeck[0] = "Ace";
cardsInDeck[1] = "Grace";
cardsInDeck[2] = "Susan";
cardsInDeck[3] = "Ian";
cardsInDeck[4] = "Barbara";
cardsInDeck[5] = "Brigadier";
cardsInDeck[6] = "Romana I";
cardsInDeck[7] = "K9";
cardsInDeck[8] = "Tegan";
cardsInDeck[9] = "Jamie";
cardsInDeck[10] = "Sarah Jane";
cardsInDeck[11] = "Jo";
cardsInDeck[12] = "Romana II";
cardsInDeck[13] = "Yates";
cardsInDeck[14] = "Leela";

var cardsDealt = new Array();
// deal 5 cards at once - works
function dealAll(){
var z=0;
for (z=0;z<5;z++) {
   cardsDealt[z] = new Image(z,dealCard(randomCard()));
}
}

//deal cards - works
function dealCard(i) {
if (numberOfCardsInDeck == 0) return false;
var $img = new Image();
    $img.src = "http://debsiepalmer.com/images/companions/" + cardsInDeck[i] + ".jpg";
// Here I set the ID of the object
$img.id=cardsInDeck[i];
$img.class='drag';

$("img").draggable();
     document.body.appendChild($img);
removeCard(i);
return $img;
}
// deal randomly - works
function randomCard() {
return Math.floor(Math.random() * numberOfCardsInDeck);   
}
// remove spent cards from pool -works
function removeCard(c)
{

for (j=c; j <= numberOfCardsInDeck - 2; j++)
{
    cardsInDeck[j] = cardsInDeck[j+1];
}
numberOfCardsInDeck--;
numberOfCardsInDeck--;
numberOfCardsInDeck--;
}

// this is what to do when card drops in tardis
function handleDropEvent( event, ui ) {
 // Here I want the id of the dropped object
}

Answer 1

对jqueryui的文档进行更多研究 - 提供了这些答案;

首先，当图像被声明为draggable时 - 这需要在将它添加到document.body之后完成 - 这是因为jquery选择器使用DOM来创建对象列表 - 所以行

$("img").draggable();
document.body.appendChild($img);

将更改为

document.body.appendChild($img);
$("img").draggable();

同样在这个示例中，所有图像都被声明为可拖动，但我们可以更具体，只需将附加图像添加到文档中即可拖动。

document.body.appendChild($img);
$('#'+$img.id).draggable();

一旦图像可拖动 - 传递给handleDropEvent的对象的属性是事件和ui - ui对象的draggable属性是一个jquery对象，它可以访问它包含的对象的属性;

function handleDropEvent( event, ui ) {
  alert(ui.draggable.attr("id"));
}

在JQuery UI中获取丢弃对象的属性值

1 个答案: