Как проверить, над каким div движется мышь, используя только TYPESCRIPT или JAVASCRIPT? - PullRequest
Новая
       47

Как проверить, над каким div движется мышь, используя только TYPESCRIPT или JAVASCRIPT?

0 голосов
/ 27 мая 2020

У меня есть div1, к которому я применил ondrag, который работает, то есть при перетаскивании элемента, вызываемого обработчиком, и я получаю целевой элемент как этот конкретный div1. Теперь, перетаскивая div1 над другими div (например, 5 div), можно определить id другого div, по которому перемещается div1. Например, у меня есть этот код: 


<html>
<head>
<style>
.design {
  float: left; 
  width: 100px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
</head>
<body>



  <div style="width: 100px; height: 35px;border: 1px solid #aaaaaa;" ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">Drag me!</div>

<div class="design" ></div>


<script>
/* Events fired on the drag target */
function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
}

function dragging(event) {
  document.getElementById("demo").innerHTML = "The p element is being dragged";
}
</script>

</body>
</html>

Но здесь у меня есть ограничение, что я не могу использовать события перетаскивания на любом div, кроме двух, которые я применил, однако я могу использовать mouseevent Спасибо

Ответы [ 2 ]

0 голосов
/ 27 мая 2020

, если вам нужна функциональность перетаскивания, и чтобы проверить, какой div перетаскивается, а на какой -, вы можете использовать jquery плагин сортируемого пользовательского интерфейса. Предположим, у меня есть страница Ledpipeline, на которой у меня есть четыре этапа конвейера sortable10, sortable 11, 12 и 13, поэтому я использовал приведенный ниже код, надеюсь, это поможет вам 

<ul class="ui-sortable defaultscroll" id="sortable-10">
                                                <li data-LeadID="L1">
                                                    <div class="leadpilinelist">
                                                        <p class="leadpname">John Doe</p>
                                                        <div class="selrdurationbox">
                                                            <span class="selerlead">Seller :</span>
                                                            <span class="slerleadname"></span>
                                                        </div>
                                                        <div class="selrdurationbox">
                                                            <span class="selerlead">Duration :</span>
                                                            <span class="slerleadname"></span>
                                                        </div>
                                                    </div>
                                                </li>
                                                
                                                
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-ss-12 col-sm-3 col-xs-6 padding0">
                                        <div class="leadpipelinebox ovrflw_hiddn">
                                            <div class="headbox_pipeline">
                                                <h4>Contact Made</h4>
                                                <span id="ContactMadeCount">0</span>
                                                <i class="mdi mdi-contacts"></i>
                                            </div>
                                            <ul id="sortable-11" class="ui-sortable defaultscroll">
                                                <li data-LeadID="L2">
                                                    <div class="leadpilinelist">
                                                        <p class="leadpname">John Doe</p>
                                                        <div class="selrdurationbox">
                                                            <span class="selerlead">Seller :</span>
                                                            <span class="slerleadname"></span>
                                                        </div>
                                                        <div class="selrdurationbox">
                                                            <span class="selerlead">Duration :</span>
                                                            <span class="slerleadname"></span>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-ss-12 col-sm-3 col-xs-6 padding0">
                                        <div class="leadpipelinebox ovrflw_hiddn">
                                            <div class="headbox_pipeline">
                                                <h4>Meeting Arranged</h4>
                                                <span id="MeetingArrage">0</span>
                                                <i class="mdi mdi-account-multiple"></i>
                                            </div>
                                            <ul id="sortable-12" class="ui-sortable defaultscroll">
                                                <li data-LeadID="L3">
                                                    <div class='leadpilinelist'>
                                                        <p class='leadpname'>John Doe</p>
                                                        <div class='selrdurationbox'>
                                                            <span class="selerlead">Seller :</span>
                                                            <span class='slerleadname'></span>
                                                        </div>
                                                        <div class='selrdurationbox'>
                                                            <span class='selerlead'>Duration :</span>
                                                            <span class='slerleadname'></span>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-ss-12 col-sm-3 col-xs-6 padding0">
                                        <div class="leadpipelinebox ovrflw_hiddn">
                                            <div class="headbox_pipeline">
                                                <h4>Proposal Made</h4>
                                                <span id="ProposalCounter">0</span>
                                                <i class="mdi mdi-file"></i>
                                            </div>
                                            <ul id="sortable-13" class="ui-sortable defaultscroll">
                                                <li data-LeadID="L4">
                                                    <div class="leadpilinelist">
                                                        <p class="leadpname">John Doe</p>
                                                        <div class="selrdurationbox">
                                                            <span class="selerlead">Seller :</span>
                                                            <span class="slerleadname"></span>
                                                        </div>
                                                        <div class="selrdurationbox">
                                                            <span class="selerlead">Duration :</span>
                                                            <span class="slerleadname"></span>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> 


<script type="text/javascript">
    
        function ChangeStage(SenderDiv, RecieveOnStage, LeadID) {
       
     alert ("DraggedDiv :"+SenderDiv + "RecievedonWhichDiv :" + RecieveOnStage + "AttributeID value dragged div :" +LeadID);            
        }



$(document).ready(function() {
$("#sortable-10").sortable({
            start: function (event, ui) {
                $("span#result").html($("span#result").html()
                   + "<b>start</b><br>");
            },
            receive: function (event, ui) {

                var RecieveFrom = ui.sender.attr("id");
                var DroppedONStage = event.target.id;
                var DroppedEmentID = $(ui.item).attr("data-LeadID");
                ChangeStage(RecieveFrom, DroppedONStage, DroppedEmentID);

            },
            connectWith: ".ui-sortable",
        });

        $("#sortable-11").sortable({
            connectWith: ".ui-sortable",
            start: function (event, ui) {
                $("span#result").html($("span#result").html()
                   + "<b>start</b><br>");
            },
            receive: function (event, ui) {

                var RecieveFrom = ui.sender.attr("id");
                var DroppedONStage = event.target.id;
                var DroppedEmentID = $(ui.item).attr("data-LeadID");
                ChangeStage(RecieveFrom, DroppedONStage, DroppedEmentID);
            },
        });

        $("#sortable-12").sortable({
            connectWith: ".ui-sortable",
            start: function (event, ui) {
                $("span#result").html($("span#result").html()
                   + "<b>start</b><br>");
            },
            receive: function (event, ui) {

                var RecieveFrom = ui.sender.attr("id");
                var DroppedONStage = event.target.id;
                var DroppedEmentID = $(ui.item).attr("data-LeadID");
                ChangeStage(RecieveFrom, DroppedONStage, DroppedEmentID);
            },
        });

        $("#sortable-13").sortable({
            connectWith: ".ui-sortable",
            start: function (event, ui) {
                $("span#result").html($("span#result").html()
                   + "<b>start</b><br>");
            },
            receive: function (event, ui) {

                var RecieveFrom = ui.sender.attr("id");
                var DroppedONStage = event.target.id;
                var DroppedEmentID = $(ui.item).attr("data-LeadID");
                ChangeStage(RecieveFrom, DroppedONStage, DroppedEmentID);
            },
        });
    });
</script>
0 голосов
/ 27 мая 2020

Так как примеров кода нет, мы не сможем дать вам ответы, которые могут вам помочь. Тем не менее, вы можете начать читать по этой ссылке, чтобы понять drop target и обнаружение столкновений .

https://javascript.info/mouse-drag-and-drop#potential -drop-target-droppables

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...