3

我正在制作一个网页，用户必须在测验中连接两个列表中的元素。例如，假设有一个测验问题，您有两个列表，一个带有国家，一个带有大写字母，用户必须将大写字母与正确的国家/地区联系起来。

优选地，用户应该有一种方法可以将元素从第二个列表拖到靠近第一个列表的元素的区域。像这样：

示例图像

在这里，您可以将蓝色框拖到灰色矩形中。

是否已经有 jQuery 插件或其他 JavaScript 库可以执行此类操作？还是我必须自己实施？如果是这样，是否有人对描述类似问题的解决方案的文章有一些指导，或者关于如何最好地解决这个问题的想法？

4

3 回答 3

2

考虑使用jQuery UI droppable吗？它几乎可以满足您的需求。只需将灰色框设置为可放置，将蓝色框设置为可拖动即可。

您可能会使用revert 选项。

于 2012-10-08T18:09:05.163 回答
2

你可以使用 Jquery-UI，看看这个小提琴：

https://jsfiddle.net/esedic/xg9f3hhy/


HTML：

<h3>Treatment Areas</h3>
<div class="container">
  <div data-value="1" class="draggable">
    <p>Back</p>
  </div>
  <div data-value="1" class="droppable">
    <div class="droparea"></div>
    <p>Area 1</p>
  </div>
</div>
<div class="container">
  <div data-value="2" class="draggable">
    <p>Adomen</p>
  </div>
  <div data-value="2" class="droppable">
    <div class="droparea"></div>
    <p>Area 2</p>
  </div>
</div>
<div class="container">
  <div data-value="3" class="draggable">
    <p>Chest</p>
  </div>
  <div data-value="3" class="droppable">
    <div class="droparea"></div>
    <p>Area 3</p>
  </div>
</div>

查询：

$('.draggable').draggable({

  //cursor: 'move'
});
$('.droppable').droppable({
  drop: function(event, ui) {
    $(this).addClass('ui-state-highlight');
    ui.draggable.position({
      of: $(this),
      my: 'left top',
      at: 'left+6 top+6'
    });
    $('.draggable').each(function(i) { 
      $(this).data('value', i+1); 
    }).filter(':first').trigger('listData');
  }
});

$('.draggable').on('listData', function() {
  $('.droppable').each(function() {
    console.log( $(this).text() + ' - ' + $(this).data('value') ); 
  });
});

SCSS：

body {
    padding: 1em;
}

.draggable {
    width: 100px;
    padding: 5px;
    float: left;
    margin: 10px 10px 10px 0;
    background: red;
    color: #fff;
    cursor: move;

      p {
      margin: 2px 0;
  }
}

.droppable {
    width: 300px;
    padding: 5px 10px 5px 5px;
    float: right;
    margin: 10px;
    border: 1px solid #ddd;

    p {
      float: right;
      width: 50px;
      height: 30px;
      padding: 5px 5px 0 0;
      text-align: center;
      margin: 0;
  }
}

.container {
    clear: both;
    margin: 10px;
    width: 100%;
}

.droparea {
    float: left;
    border: 1px dashed red;
    width: 108px;
    height: 30px;
}
于 2020-06-12T07:20:42.537 回答
1

这个拖放 Javascript 代码，它适用于浏览器，但不适用于 ipad 的 ibook 应用程序，即使我使用了 jquery.ui.touch-punch.min.js，请给我解决方案

  <?xml version="1.0" encoding="UTF-8"?>  
    <!DOCTYPE html> 
     <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/OEBPS" xmlns:ibooks="http://apple.com/ibooks/html-extensions">
<head>
    <title>Demo 2: Drag and drop</title>

    <style type="text/css">
    /* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
    #mainContainer{
        width:600px;
        margin:0 auto;
        margin-top:10px;
        border:1px solid #000;
        padding:2px;
    }

    #capitals{
        width:200px;
        float:left;
        border:1px solid #000;
        background-color:#E2EBED;
        padding:3px;
        height:400px;
    }
    #countries{
        width:300px;
        float:right;
            margin: 4px 61px 3px -8px;
        height:400px;
    }   
    #labels{
        width: 120px;
        float:right;
              margin: -403px 116px 3px -8px;
        height:400px;
        /*border: 1px solid red;*/
    }   
    .dragableBox,.dragableBoxRight{
        width:80px;
            height: 10px;
        border:1px solid #000;
        background-color:#FFF;      
        margin-bottom:5px;
        padding:10px;
        font-weight:bold;
        text-align:center;
    }
    .dragableBox,.labelBoxRight{
        width:80px;
            height: 10px;
        border:1px solid #000;
        background-color:#FFF;      
        margin-bottom:5px;
        padding:10px;
        font-weight:bold;
        text-align:center;
    }
    div.dragableBoxRight{
    height: 31px;
        width:110px;
        /*float:left;*/
        margin-right:5px;
        padding:5px;
        background-color:#D3D3D3;
        border: 1px dashed;
    }
    div.labelBoxRight{
               height: 31px;
        width:110px;
        /*float:left;*/
        margin-right:5px;
        padding:5px;
        background-color:#E2EBED;
    }
    .dropBox{
        width:190px;
        border:1px solid #000;
        background-color:#E2EBED;
        height:400px;
        margin-bottom:10px;
        padding:3px;
        overflow:auto;
    }       
    a{
        color:#F00;
    }

    .clear{
        clear:both;
    }
    img{
        border:0px;
    }   
    </style>    

</head>
<body>  

    <div id="mainContainer">

        <div id="capitals">

            <div id="dropContent">
                <div class="dragableBox" id="box1">Br<sup>&#x002B;</sup></div>
                <div class="dragableBox" id="box2">Br<sup>&#x2212;</sup></div>
                <div class="dragableBox" id="box3">CN<sup>&#x2212;</sup></div>
                <div class="dragableBox" id="box4">NO<sub>2</sub><sup>&#x002B;</sup></div>
                <div class="dragableBox" id="box5">NO<sub>2</sub><sup>&#x2212;</sup></div>
                <div class="dragableBox" id="box6">NH<sub>2</sub><sup>&#x2212;</sup></div>
                <div class="dragableBox" id="box7">RC=C<sup>&#x2212;</sup></div>
                <div class="dragableBox" id="box8">MeCO<sup>&#x002B;</sup></div>
            </div>
        </div>
        <div id="countries">
            <div id="box106" class="dragableBoxRight"></div>
            <div id="box107" class="dragableBoxRight"></div>
            <div id="box101" class="dragableBoxRight"></div>
            <div id="box104" class="dragableBoxRight"></div>
            <div id="box105" class="dragableBoxRight"></div>
            <div id="box102" class="dragableBoxRight"></div>
            <div id="box103" class="dragableBoxRight"></div>
            <div id="box108" class="dragableBoxRight"></div>


        </div>
        <div id="labels">
            <div id="boxl106" class="labelBoxRight">nucleophiles</div>
            <div id="boxl107" class="labelBoxRight">Electrophiles</div>
            <div id="boxl101" class="labelBoxRight">nucleophiles</div>
            <div id="boxl104" class="labelBoxRight">Electrophiles</div>
            <div id="boxl105" class="labelBoxRight">nucleophiles</div>
            <div id="boxl102" class="labelBoxRight">Electrophiles</div>
            <div id="boxl103" class="labelBoxRight">nucleophiles</div>
            <div id="boxl104" class="labelBoxRight">nucleophiles</div>

        </div>
        <div class="clear"></div>
        <div class="konaBody"></div>
    </div>

<div id="debug"></div>
<input type="button" value="reset" name="reset" onclick="r1();"/>
      <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery-1.9.1.js"></script>
     <script src="js/jquery-ui.js"></script>
     <script type="text/javascript" src="js/drag-drop-custom.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/hammer.min.js"></script>
   <!-- <link href="css/jquery-ui.css" rel="stylesheet"
        type="text/css" />-->

<script type="text/javascript">
     <![CDATA[

// Custom drop action for the country boxes
function dropItems(idOfDraggedItem,targetId,x,y)
{
    var targetObj = document.getElementById(targetId);  // Creating reference to target obj
    var subDivs = targetObj.getElementsByTagName('div');    // Number of subdivs
    if(subDivs.length>0 && targetId!='capitals')return; // Sub divs exists on target, i.e. element already dragged on it. => return from function without doing anything
    var sourceObj = document.getElementById(idOfDraggedItem);   // Creating reference to source, i.e. dragged object
    var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1;    // Find numeric id of target
    var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1; // Find numeric id of source

    if(numericIdTarget-numericIdSource==100){   // In the html above, there's a difference in 100 between the id of the country and it's capital(example:
                                                // Oslo have id "box1" and Norway have id "box101", i.e. 1 + 100.
        sourceObj.style.backgroundColor='#0F0'; // Set green background color for dragged object
    }else{
        sourceObj.style.backgroundColor=''; // Reset back to default white background color
    }
    if(targetId=='capitals'){
    // Target is the capital box - append the dragged item as child of first sub div, i.e. as child of <div id="dropContent">
        targetObj = targetObj.getElementsByTagName('div')[0];   

    }
    targetObj.appendChild(sourceObj);   // Append   
}

function r1()
{


}

var dragDropObj = new DHTMLgoodies_dragDrop();  // Creating drag and drop object

// Assigning drag events to the capitals
dragDropObj.addSource('box1',true); // Make <div id="box1"> dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true); // Make <div id="box2"> dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true); // Make <div id="box3"> dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box5',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box6',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box7',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addSource('box8',true); 

// Assigning drop events on the countries
dragDropObj.addTarget('box101','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box102','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box103','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box104','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box105','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box106','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box107','dropItems');
dragDropObj.addTarget('box108','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('capitals','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop

dragDropObj.init(); // Initizlizing drag and drop object
    ]]>
</script>
</body>
</html>
于 2015-08-10T04:32:51.060 回答