1

首先我对jQuery或JavaScript不熟悉，我只对PHP非常了解

我遵循了youtube 教程，但没有得到预期的结果。

我需要创建一个框来放置一些图像，当图像放入该框中时，我会得到图像的标题，因此我可以在搜索中使用该标题值（使用框作为搜索区域）

我从提到的教程开始，即：

HTML：

<html>
    <head>
        <title>Drag Drop using Jquery</title>
        <meta charset="utf-8"/>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="jquery.js"/></script>
    </head> 
    <body>
        <ul>
            <li class="item"><img src="banana.png" title="banana" alt="banana" /></li>
            <li class="item"><img src="spinach.png" title="spinach" alt="spinach" /></li>
            <li class="item"><img src="cumin.png" title="cumin" alt="cumin" /></li>
            <li class="item"><img src="mango.png" title="mango" alt="mango" /></li>
        </ul>
        <div id="list"></div>
    </body>
</html>

CSS：

ul{
    padding:0;
    width: 500px;
    list-style:none;
}
.item{
    cursor:pointer;
}

#list{
    border:1px solid #000000;   width:100px; height:150px; background:#f0f0f0;
}
#list .border{
    background:red;
    border-width:2px;
}

查询：

$(document).ready(function(){
    $('li').draggable({containment: "document", revert:true,
        start: function(){
            contents = $(this).title();
        }
    });

    $('#list').droppable({hoverClass: 'border', accept: '.item',
        drop: function(){
            $('#list').append(contents = '&nbsp;');
        }
    });

})

非常感谢您回答我的问题

只是我想：1-知道如何避免重复attr('title')之前添加的任何内容？

2-另外，如果我attr('title')错误地添加了如何删除它？

4

3 回答 3

4

没有.title()方法，这意味着如果你想获得你必须使用的标题.attr()。其次，您正在选择一个实际上没有标题属性的li，因此您必须选择图像。

您还需要在可拖动函数之外声明内容，否则它只会在那里工作。

$(document).ready(function () {
    var contents = '';
    $('li img').draggable({
        containment: "document",
        revert: true,
        start: function () {
             contents = $(this).attr('title');
        }
    });

    $('#list').droppable({
        hoverClass: 'border',
        accept: 'img',
        drop: function () {
            $('#list').append(contents + '&nbsp;');
        }
    });
})

小提琴

于 2013-07-23T11:02:06.273 回答
2

您正在拖动没有 title 属性的 li 元素。要获取由 li 包裹的图像的标题属性，您可以执行以下操作：-

$(document).ready(function(){
    var contents;
    $('li').draggable({containment: "document", revert:true,
        start: function(){
            contents = $(this).find('img').attr('title');
        }
    });
});
于 2013-07-23T11:02:17.010 回答
2

你在打电话

contents = $(this).title();

jQuery 没有 .title() 方法 - 尝试使用.attr('title'); 反而

于 2013-07-23T11:00:54.387 回答