Question

美好的一天！

我最近开始使用HTML5和javascript，尤其是拖放操作。我遇到了一个小问题。如您在我的代码上看到的，我有6个具有相应ID的可拖动图像。有人可以指导或帮助我如何根据所放的图像（id）显示文本。现在，当放置图像时，它们都具有相同的文本显示。我知道这可以通过if语句完成，但是我在使用javascript时遇到了麻烦。有人可以启发我吗？非常感谢你！

<!DOCTYPE HTML>
<html>
<head>
    <!-- <link href='//fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'> -->
    <link rel="stylesheet" href="animate.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Example 25 | Rick's code</title>
    <link rel="author" href="http://google.com/+RicardTorres"/>
</head>
<body>

<div class="container">
    <div class="row">
        <h1>Drag and Drop test</h1>
    </div>

    <div class="row">
        <div id="drop">
            <div id="output"></div>
        </div>
    </div>

    <div class="row">
        <div id="total-costs">
            Total costs: <span></span>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-2 col-sm-6">
            <div draggable="true" class="dragable-item" id="1" data-title="Box 1" data-price="200"><img class="image" src="7808910503.jpg"></div>
        </div>
        <div class="col-lg-2 col-sm-6">
            <div draggable="true" class="dragable-item" id="2" data-title="Box 2" data-price="250"><img class="image" src="7943544458.jpg"></div>
        </div>
        <div class="col-lg-2 col-sm-6">
            <div draggable="true" class="dragable-item" id="3" data-title="Box 3" data-price="260"><img class="image" src="8077136002.jpg"></div>
        </div>
        <div class="col-lg-2 col-sm-6">
            <div draggable="true" class="dragable-item" id="4" data-title="Box 4" data-price="270"><img class="image" src="7808910503.jpg"></div>
        </div>
        <div class="col-lg-2 col-sm-6">
            <div draggable="true" class="dragable-item" id="5" data-title="Box 3" data-price="260"><img class="image" src="8077136002.jpg"></div>
        </div>
        <div class="col-lg-2 col-sm-6">
            <div draggable="true" class="dragable-item" id="6" data-title="Box 2" data-price="250"><img class="image" src="7943544458.jpg"></div>
        </div>
    </div>

    <p id="demo"></p>

<div style="clear:both;"></div>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
// Callback function when cancelling the event
function cancel(e) {
    if (e.preventDefault) {
    e.preventDefault();
    }
    return false;
}

function refresh_total_costs(total_costs){

    $('#total-costs span').text(total_costs);
}

$(document).ready(function() {

    var total_costs = 0;

    refresh_total_costs(total_costs);

    // Get the #drop zone
    var drop = document.getElementById('drop');

    var draggedItem = null;

    // Add the Event Listener to each draggable item
    $('.dragable-item').each(function(index){
        $(this)[0].addEventListener('dragstart',function(e){

            draggedItem = jQuery(this);

            e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work

        },false);
    });

    drop.addEventListener('dragover', cancel);
    drop.addEventListener('dragenter', cancel);

    drop.addEventListener('drop', function (e) {

       e.preventDefault();

       // Let's play with the data attribute
       var html = $(draggedItem).data('title') + " costs " +  $(draggedItem).data('price') + "<br />";

       $('#output').prepend( html );

       total_costs += parseInt($(draggedItem).data('price'));

       refresh_total_costs(total_costs);

      return false;
    });
});

document.addEventListener("dragend", function(event) { 
    document.getElementById("demo").innerHTML = "Finished dragging the image.";
    event.target.style.opacity = "1";
});

</script>
</body>
</html>

Answer 1

更改第116行：

document.getElementById("demo").innerHTML = "Finished dragging the image: " + event.target.parentElement.dataset.title;

有关数据属性的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset 和事件Api：https://developer.mozilla.org/en-US/docs/Web/API/Event/target

Answer 2

我建议使用JqueryUI，但是根据您的代码，可以通过将以下代码替换为现有代码来实现目标。

document.addEventListener("dragend", function(event) { 
        document.getElementById("demo").innerHTML = "Finished dragging the image." + event.target.closest("div").attributes["data-title"].textContent
        event.target.style.opacity = "1";
});

放下事件时显示文字

2 个答案: