Question

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

///// 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 Document * /

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;
}

Answer 1

此：

contents = $(this).text();

只发送文字。如果你改用html：

contents = $(this).html();

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

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

更多关于JQuery .html（） - http://api.jquery.com/html/

拖放时丢失的JQuery列表项链接

1 个答案: