拖放jqueryui問題

我想拖動列表並將其放在佔位符上。拖放jqueryui問題

只要文本觸及一個佔位符，就應該改變背景顏色，以表明內容可以放在這裏。

但是我面臨的問題是，當兩個可放置的佔位符彼此相鄰，然後當我將鼠標懸停在兩個位置上並放下它時，它將被放在兩個位置上。它應該只限於第一個。請在下面的鏈接中打開以供參考，只需拖動一個較大的名稱並將其放在{1} {2}上，然後它應該只放在一個上面。

可能嗎？

CSS

.textarea { 
    background: #00ff00; 
    width: 100% 
} 

.dragitems { 
    width: 20%; 
    float: left; 
    background: #f1f1f1; 
} 

.dropitems { 
    width: 75%; 
    float: left; 
    background: #f1f1f1; 
    margin-left: 20px; 
    padding: 5px 5px 5px 5px; 
} 

.dragitems ul { 
    list-style-type: none; 
    padding-left: 5px; 
    display: block; 
} 

#content { 
    height: 400px; 
    width: 650px; 
}

HTML

<body> 
    <form id="form1" runat="server"> 
    <div id="content"> 

     <div class="dragitems"> 
     <h3> 
       <span>Available Fields</span></h3> 
     <ul id="allfields" runat="server"> 
      <li id="node1">Name</li> 
      <li class="ui-draggable" id="node2">Address</li> 
      <li class="ui-draggable" id="node3">Phone</li> 
      <li class="ui-draggable" id="node4">Sender Name</li> 
      <li class="ui-draggable" id="node5">Sender Address</li> 
      <li class="ui-draggable" id="node6">Sender Phone</li> 
      <li class="ui-draggable" id="node7">Sender Email</li> 
      <li class="ui-draggable" id="node8">Other1</li> 
      <li class="ui-draggable" id="node9">Other2</li> 
      <li class="ui-draggable" id="node10">Other3</li> 
      <li class="ui-draggable" id="node11">Other4</li> 
      <li class="ui-draggable" id="node12">Other5</li> 
     </ul> 
     </div> 
     <div class="dropitems"> 
     <div id="TextArea1" cols="50" name="S1" rows="20"><span id="{1}">{1}</span><span id="{2}">{2}</span> thanks and regards<span id="{3}">{3}</span></div> 
     </div> 
    </div> 
    </form> 
</body>

$(function() { 
    $("#allfields li").draggable({ 
    appendTo: "body", 
    helper: "clone", 
    cursor: "copy", 
    revert: "invalid" 

    }); 
    initDroppable($("#TextArea1 span")); 

    function initDroppable($elements) { 
    $elements.droppable({ 
     tolerance: "touch", 
     hoverClass: "textarea", 
     accept: ":not(.ui-sortable-helper)", 
     drop: function(event, ui) { 
     var $this = $(this); 

     var tempid = ui.draggable.text(); 
     var dropText; 
     dropText = " {" + tempid + "} "; 

     var div = document.getElementById("TextArea1"); 
     var spans = div.getElementsByTagName("span"); 


     $this[0].textContent = dropText; 

     }, 
     tolerence: 'intersect' 
    }); 
    } 
});

Example Fiddle

來源

2017-07-14 Aman Rawat

我看到它的工作原理與您所說的一樣，您希望它能工作......我誤解了嗎？ http://gph.is/2taW72C – Jacrys

您**需要**在您的問題**中發佈[mcve] **。這不是可選的。 – j08691

由於您是StackOverflow的新手，因此我已更新您的文章以反映我們期望的問題。請查看我的更改和上面發佈的評論，以便了解如何發佈不會被關閉的問題。最後，我回答了你的問題。投票，將其標記爲可接受的解決方案，並在您坐在辦公桌前給我一個緩慢的拍手...... –

您所看到的行爲是通過設計（即，它不是一個錯誤）。

獲得所需功能的唯一方法是將您的容差從touch更改爲pointer。當你這樣做的時候，佔位符只會根據光標的位置而不是你拖動的元素的位置來突出顯示。

$(function() { 
    $("#allfields li").draggable({ 
    appendTo: "body", 
    helper: "clone", 
    cursor: "copy", 
    revert: "invalid" 

    }); 
    initDroppable($("#TextArea1 span")); 

    function initDroppable($elements) { 
    $elements.droppable({ 
     tolerance: "pointer", // Property that was changed 
     hoverClass: "textarea", 
     accept: ":not(.ui-sortable-helper)", 
     drop: function(event, ui) { 
     var $this = $(this); 

     var tempid = ui.draggable.text(); 
     var dropText; 
     dropText = " {" + tempid + "} "; 

     var div = document.getElementById("TextArea1"); 
     var spans = div.getElementsByTagName("span"); 


     $this[0].textContent = dropText; 

     }, 
     tolerence: 'intersect' 
    }); 
    } 
});

這是a working fiddle。

來源

2017-07-14 15:06:44

拖放jqueryui問題

回答

相關問題