拖放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问题

回答

相关问题