8

ページの1つでドラッグアンドドロップにJqueryUIを使用していますが、何らかの理由で、ドロップ可能なドロップイベントに渡されるui.draggableオブジェクトの属性を取得できないようです。

ui.draggable.attr（ "src"）と$（ui.draggable）.attr（ "src"）はどちらも未定義を返しますが、ui.draggable.html（）と入力すると、htmlが返されます。何か案は？

4

4 に答える 4

10

私はそれを考え出した。解決策は、ui.draggable.find（ "img"）。attr（ "src"）を呼び出すことです。私は、ui.draggableオブジェクトが画像であると想定しました。

于 2010-04-14T13:21:14.990 に答える
2

@ジョンの答えは正しいです。解決策は、ドラッグ可能な要素を事前に検査することなく、単にattrメソッドを試すことです（そうしないと困惑します）。

jQuery UIの「ドラッグ可能」として宣言されたhtml要素が与えられた場合：

<img src='some/path/for/this/image' class='draggable_img' title='I am an image!' />

そして、この「div」をドロップ可能として指定します。

<div id='droppable_area'> </div>

<script>
$('img.candidate_thumbnail').droppable({
  drop: function(event, ui) {
    console.info('ui.draggable.title:' + ui.draggable.title);
    console.info('ui.draggable.attr("title"):' + ui.draggable.attr('title'));
    console.dir('ui.draggable:' + ui.draggable);
  }    
</script>

そして私は得た：

ui.draggable.title: undefined
ui.draggable.attr("title"): I am an image!
ui.draggable: [object Object]
  -> No Properties
于 2013-02-25T05:55:32.660 に答える
1

たとえば、この方法で行うことができます

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <script src="jquery-1.5.min.js"></script>
        <script src="jquery-ui-1.8.16.custom.min.js"></script>          
        <style>         
        body{
            margin:0;
            padding:0;
        }

        .box{
            display:block;
            width:100px;
            height:50px;
            background-color:green;
            border:1px solid #000;
        }

        #drop{
            position:absolute;
            top:220px;
            left:220px;
            width:250px;
            height:250px;
            border:1px solid red;
            background:yellow;
            z-index:1;
        }
        </style>
        <script type="text/javascript">
        $(document).ready(function(){

            $('#boxBesar p').each(function(index,element){
                $('#boxBesar p:eq('+index+')').css({
                    'border':'1px solid #000',
                    'width':'100px',
                    'height':'100px',
                    'position':'absolute',
                    'left':(index*200)+10,
                    'z-index':index+2,
                    'color':'black',
                    'text-align':'center',
                    'background':'#ccc'
                })
            })

                    .draggable({
                        revert:true
                    })

            $('#drop').droppable({
                    drop:dropIt
            })

            function dropIt(event,ui){
                            //get an id
                **var id=ui.draggable.attr('id')**

                            //test an id name
                alert(id)
            }

        })
        </script>
    </head>


    <body>
        <div id="boxBesar">
            <p id="b1">Box 1</p>
            <p id="b2">Box 2</p>
        </div>

        <div id="parent">
            <div id="drop" >

            </div>
        </div>
    </body>

</html>
于 2012-01-03T03:13:07.757 に答える
0

この答えは将来のユーザーに残されています。ui.draggableでコンソールログを1つ作成して展開し、次にui.draggable.context......などを実行します。ソース名が何であるかを理解できます。

console.log(ui.draggable.context.attributes.src.textContent)
于 2016-06-14T09:06:17.627 に答える