Drag Drop jqueryui Problem

Ich möchte eine Liste ziehen und über Platzhalter löschen.Drag Drop jqueryui Problem

Sobald Text einen Platzhalter berührt, sollte er die Hintergrundfarbe ändern, um anzuzeigen, dass der Inhalt hier gelöscht werden kann.

Aber ich habe Probleme, wenn es zwei Drop-fähige Platzhalter nebeneinander gibt, wenn ich beide über beide schwebe und es fallen lasse, dann wird es über beide fallengelassen. Es sollte sich nur auf die erste beschränken. Bitte öffnen Sie den unteren Link als Referenz, ziehen Sie einfach einen größeren Namen und legen Sie ihn über {1} {2}, dann sollte er nur auf einen fallen.

Ist es möglich?

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

Quelle

2017-07-14 Aman Rawat

Ich sehe es funktioniert genau so, wie Sie sagen, dass Sie es wünschen zu arbeiten ... bin ich Missverständnis? http://gph.is/2taW72C – Jacrys

Sie ** brauchen **, um ein [mcve] ** in Ihrer Frage ** zu veröffentlichen. Das ist nicht optional. – j08691

Da Sie neu bei StackOverflow sind, habe ich Ihren Beitrag aktualisiert, um zu reflektieren, wie eine Frage aussehen soll. Bitte lesen Sie meine Änderungen und die oben genannten Kommentare, damit Sie verstehen, wie Sie Fragen stellen können, die nicht geschlossen werden. Zuletzt habe ich deine Frage beantwortet. Stimme es ab, markiere es als akzeptierte Lösung und gib mir einen langsamen Klaps, während du an deinem Schreibtisch sitzt ... –

Das Verhalten, das Sie sehen, ist von Entwurf (d. H. Es ist kein Fehler).

Die einzige Möglichkeit, die gewünschte Funktionalität zu erhalten, besteht darin, die Toleranz von touch zu pointer zu ändern. Wenn Sie das tun, wird der Platzhalter nur basierend auf der Position des Cursors hervorgehoben, nicht die Position des Elements, das Sie ziehen.

$(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' 
    }); 
    } 
});

Hier ist a working fiddle.

Quelle

2017-07-14 15:06:44

Drag Drop jqueryui Problem

Antwort

Verwandte Themen