2

下面的代码将一个列表项拖放到一个框中。但是，当我将链接作为列表项放入时，一旦拖放，这些项目就不再显示为链接（它们只是显示为文本）。请帮忙。这将很快用于一个项目。我将不胜感激。

///// JAVASCRIPT-------------------------------------------------------- -----------------

a = 0;
num = 1;

$(document).ready(function() {
        $('li').draggable({ containment: 'document', revert: true,
    start: function() {
        contents = $(this).text();
    }
});
    $('#list').droppable({ hoverClass: 'border', accept: '.item',
    drop: function() {


    if(a % 4 == 0) {
        $('#list').append('<br / >');
    }
     $('#list').append(num + '. ' + contents + '&nbsp;' + '&nbsp;' + '&nbsp;' + '&nbsp;');
        a = a + 1;
        num = num + 1;

    }
    }); 
});

///// HTML-------------------------------------------- ------------------------------------------- JQuery 教程 

</head>

<body>
<table>
<td>
<tr>
Create Your Own Playlist <br />
Simply Drag and Drop the Lessons You'd Like to View
</tr>
</td>
<td>

    <ul>
        <li class="item">Agility</li>
        <li class="item">Broadband</li>
        <li class="item">Cloud</li>
        <li class="item"> <a href="facebook.com">Link text</a> </li>
    </ul>

    </td>

    <td>
    <ul>
        <li class="item">Flexibility</li>
        <li class="item">Hybrid</li>
        <li class="item">Interoperability</li>
        <li class="item"> <a href="facebook.com">Link text</a> </li>
    </ul>
    </td>

    <td>
    <ul>
        <li class="item">Community</li>
        <li class="item">Portability</li>
        <li class="item">Elasticity</li>
        <li class="item"> <a href="facebook.com">Link text</a> </li>
    </ul>
    </td>

    <td>
    <ul>
        <li class="item">Infrastructure</li>
        <li class="item">Migration</li>
        <li class="item">Multi-Tenancy</li>
        <li class="item"> <a href="facebook.com">Link text</a> </li>
    </ul>
    </td>

    <td>
    <ul>
        <li class="item">Navigation</li>
        <li class="item">Optimization</li>
        <li class="item">Private</li>
        <li class="item"> <a href="facebook.com">Link text</a> </li>
    </ul>
    </td>

    <td>
    <ul>
        <li class="item">Provisioning</li>
        <li class="item">Public</li>
        <li class="item">Risk</li>
        <li class="item"> <a href="facebook.com">Link text</a> </li>
    </ul>
    </td>

    <td>
    <ul>
        <li class="item">Security</li>
        <li class="item">Smart Phones</li>
        <li class="item">Social Media</li>
        <li class="item"> <a href="facebook.com">Link text</a> </li>
    </ul>
    </td>

    <td>
    <ul>
        <li class="item">Standards</li>
        <li class="item">Storage</li>
        <li class="item">Virtual Machines</li>
        <li class="item"> <a href="facebook.com">Link text</a> </li>
    </ul>
    </td>

    </table>

    <div id="list"></div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
        <script type="text/javascript" src="ui.js"></script>
</body>
</html>

///// CSS-------------------------------------------------------- ------------------------------------- @charset "utf-8"; /* CSS 文档 */

ul {
    width: 100px;
    padding: 0px;
    list-style: none;

}

#list {
    width: 800px;
    height: 150px;
    background-color: #f0f0f0;
    border: 1px solid #000;
    overflow: auto;
}

#list.border {
    border-width: 2px;
}
4

1 回答 1

1

这：

contents = $(this).text();

只是发送文本。如果您改用 html：

contents = $(this).html();

您将通过拖放事件发送整个 html 块。您可以保持其余代码相同。

工作示例：http: //jsfiddle.net/MLhgk/

更多关于 JQuery .html() - http://api.jquery.com/html/

于 2013-02-27T06:00:21.323 回答