Question

我正在开发一个项目，我必须在3文本框中存储3ID的drop项目。但是当我拖放任何一个它存储它的id但是当我放下第二个项目它存储它的ID但是从文本框中删除第一个ID。

码

function dropItems(idOfDraggedItem, targetId, x, y) {

var targetObj = document.getElementById(targetId);  
var subDivs = targetObj.getElementsByTagName('DIV');    
if(subDivs.length>0 && targetId!='body')return; 
var sourceObj = document.getElementById(idOfDraggedItem);   
var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1;
var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1; 

    if (numericIdTarget == '101') {
        document.getElementById('txt1').value = numericIdSource;
    } else {
        document.getElementById('txt1').value = "";
    }
    if (numericIdTarget == '102') {
        document.getElementById('txt2').value = numericIdSource;
    } else {
        document.getElementById('txt2').value = "";
    }
    if (numericIdTarget == '103') {
        document.getElementById('txt3').value = numericIdSource;
    } else {
        document.getElementById('txt3').value = "";
    }

    var fn = "Feeling1:-" + document.getElementById('txt1').value + ", Feeling2:-" + document.getElementById('txt2').value + ", Feeling3:-" + document.getElementById('txt3').value + "";

    document.getElementById('txt4').value = fn;

    if (numericIdTarget - numericIdSource == 100) {
        sourceObj.style.backgroundColor = '';
    } else {
        sourceObj.style.backgroundColor = '';
    }
    if (targetId == 'body') {
        targetObj = targetObj.getElementsByTagName('DIV')[0];
    }
    targetObj.appendChild(sourceObj);
}

初始化（来自评论）

$(document).ready(function(e) {
    var inp1=$("#txt1");
    var inp2=$("#txt2");
    var inp3=$("#txt3");
    $("#bttn").click(function(){
        if(inp1.val()=="" && (inp2.val()!="" || inp3.val()!="")) {
            alert("Provide answer in consecutive manner");
        } else if((inp1.val()=="" || inp2.val()=="") && inp3.val()!="" ) {
            alert("Provide answer in consecutive manner");
        } else {
            alert("Submit");
        }
    });
})

Answer 1

我喜欢使用jquery内置的draggable / droppable来获取id，这可能会帮助你了解当前情况。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Test Page</title>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script>
            $(function() {
                $( ".draggable" ).draggable();
                $( ".droppable" ).droppable({
                    drop: function( event, ui ) {
                        var id = $( this ).attr("id");
                        var container = ui.draggable.attr("id");
                        alert(id + " " + container);
                    }
                });
            });
        </script>
        <style>
            .draggable{
                width: 100px;
                height: 50px;
                border: 1px black solid;
                margin: 0.5em;
            }
            .droppable{
                width: 100px;
                height: 50px;
                border: 1px black solid;
                margin: 0.5em;
            }
        </style>
    </head>
    <body>
        <div id="draggable1" class="draggable">
            <p>Drag me to my target</p>
        </div>
        <div id="draggable2" class="draggable">
            <p>Drag me to my target</p>
        </div>
        <div id="draggable3" class="draggable">
            <p>Drag me to my target</p>
        </div>
        <div style="height: 25px;"></div>
        <div id="droppable1" class="droppable">
            <p>Drop here</p>
        </div>
        <div id="droppable2" class="droppable">
            <p>Drop here</p>
        </div>
    </body>
</html>

无法永久存储拖动项目的ID

1 个答案: