访问jquery ui中的可拖动项目

i have built an interface for dragging images into a "save area" and i dont know how to access the actual html markup- such as the img src tag?

我已经构建了一个界面,用于将图像拖动到“保存区域”,我不知道如何访问实际的html标记 - 例如img src标记?

i have this

我有这个

$(function(){
        $('.draggable').draggable();
        $('#droparea').droppable({
           drop: function(ev,ui) {
                 //do magic
            },
            out: function(event, ui){
                removeone();            
            }
        });
    });

what do i use to access the image src?

我用什么来访问图像src?

<img border="0" src="http://bla.png" class="draggable ui-draggable" style="position: relative;">

i have a few hundred images.. what should i do so that when they are dropped i can get access to the src?

我有几百张图片..我应该怎么做,当他们被丢弃时,我可以访问src?

2 个解决方案

#1

Working demo

In the drop function, you access the object with "ui.draggable":

在drop函数中,使用“ui.draggable”访问对象:

For example:

$trash.droppable({
            accept: "#gallery > li",
            activeClass: "ui-state-highlight",
            drop: function( event, ui ) {
                processImage( ui.draggable );
            }

It passes a Jquery object to the "processImage" function. There you can access the properties of the image in two ways:

它将Jquery对象传递给“processImage”函数。在那里,您可以通过两种方式访问图像的属性:

1.-As a Jquery object: $item.attr("src")

1.-作为Jquery对象:$ item.attr(“src”)

2.-Or as the DOM element: $item.get(0).src

2.-或者作为DOM元素:$ item.get(0).src

 function processImage($item)
{
alert($item.attr("src"));
}

Of course, you can get rid of "processImage" function, and access directly to the object as:

当然,你可以摆脱“processImage”功能,并直接访问对象:

ui.draggable.attr("src")

ui.draggable.get(0).src

#2

You can access it with the ui parameter.

您可以使用ui参数访问它。

drop: function (ev, ui) {
    var image_source = ui.helper.attr('src');
}

#1