如何使可拖動元素跟隨鼠標指針

Question

我有幾個可拖動的項目。 當我拖動它們時，助手克隆總是出現在頁面頂部。 如何讓它們在拖動時跟隨鼠標？

我知道cursorAt: { left: 0, top: 0}選項，但我的元素定位會有所不同，我不知道拖動將從哪個位置開始。 該怎么辦？ 這是我嘗試過的其他方法：

$('#widget li').draggable({
            helper: 'clone',
            revert: 'invalid',
            cursorAt: { left: helperX, top: helperY },
            start: function(e, ui){
              $('#widget').css({'position': ''});
              helperX = $('#widget li').width()/2;
              helperY = e.pageY - ui.position.top;
            },
            stop: function(){
              $('#widget').css({'position': 'relative'});
            },
            drag: function(){
              $(this).css({'z-index':'1500'});
            }
        });

這不起作用，因為helperX和helperY定義得太晚了。 這是小提琴： https : //jsfiddle.net/vaxobasilidze/wh6addd6/7/

 $('#deviceName li').draggable({ helper: 'clone', revert: 'invalid', start: function(e, ui) { $('#deviceName').css({ 'position': '' }); $(ui.helper).css({ 'top': '400px' }); }, stop: function() { $('#deviceName').css({ 'position': 'relative' }); }, drag: function() { $(this).css({ 'z-index': '1500' }); } }); $('#interface li').draggable({ helper: 'clone', revert: 'invalid', start: function(e, ui) { $('#interface').css({ 'position': '' }); $(ui.helper).css({ 'top': '400px' }); }, stop: function() { $('#interface').css({ 'position': 'relative' }); }, drag: function() { $(this).css({ 'z-index': '1500' }); } }); function foo() { $('.foo').each(function() { $(this).draggable({ //containment: $(this).parent(), stack: '.foo' }); }); } var fooCount = $('.foo').length; $('#mainDiv').droppable({ drop: function(event, ui) { if (!ui.draggable.hasClass('foo')) { var Class = ui.draggable.attr("class"); var title = ui.draggable.text().trim(); var item = $('<table class="foo elementTable ' + Class + '" name="' + title + '" id="' + (fooCount + 1) + '"><tr class="tableHeader"><th class="thClass"><button class="settings">set</button>' + title + '<span class="close">x</span></th></tr><tr><td class="add"><span class="addList">Add new link</span></td></tr></table>'); $(this).append(item); fooCount += 1; foo(); } } });

 html { margin: 0; padding: 0; width: 100%; height: 100%; background: #2c2c2c; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzNkM2QzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #2c2c2c), color-stop(37%, #3d3d3d), color-stop(66%, #353535), color-stop(66%, #353535), color-stop(100%, #131313)); background: -webkit-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); background: -o-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); background: -ms-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); background: linear-gradient(to right, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#131313', GradientType=1); } body { margin: 0; padding: 0; width: 100%; height: 100%; color: #b8c0c8; background: rgba(0, 0, 0, 0.3); } #leftDiv { display: inline-block; width: 15%; height: 100%; border-right: 3px solid rgba(0, 0, 0, 0.2); box-sizing: border-box; float: left; margin: 0; padding: 0; overflow: auto; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.33); } #deviceInfo { min-height: auto; border-bottom: 3px solid rgba(0, 0, 0, 0.2); padding: 3px; resize: vertical; overflow: auto; } #menu { padding: 0; margin: 0; margin-bottom: 5px; list-style-type: none; } #menu li { list-style: none; padding: 2px; border-radius: 4px; margin-top: 1px; } #menu li span { display: block; width: 100%; min-height: 20px; line-height: 20px; text-align: center; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26); cursor: pointer; } #menu li ul { padding: 0; list-style-type: none; overflow: hidden; } #menu li ul li { width: 100%; max-width: 250px; text-align: center; min-height: 20px; line-height: 20px; margin: auto; border-bottom: 1px solid rgba(0, 0, 0, 0.3); cursor: move; } #menu li ul li:first-child { margin-top: 2px; border-top-left-radius: 4px; border-top-right-radius: 4px; } #menu li ul li:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: none; } #settingsDiv { margin: 0; width: 100%; min-height: 10px; box-sizing: border-box; margin: 0; padding: 3px; overflow: auto; } #mainDiv { display: inline-block; width: 85%; min-height: 100%; box-sizing: border-box; position: relative; float: left; margin: 0; overflow: auto; padding: 3px; } .foo { min-width: 250px; width: auto; text-align: center; min-height: 30px; border: 1px solid #515151; border-radius: 6px; position: absolute; padding: 0; overflow: hidden; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.33); box-shadow: 5px 5px rgba(0, 0, 0, 0.1); } .thClass { display: block; min-width: 150px; width: 102%; margin-left: -3px; text-align: center; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26); margin-top: -2px; min-height: 30px; line-height: 30px; font-size: 19px; cursor: move; } .header { margin-left: 17px; } .tableBody { display: block; min-height: 25px; text-align: center; width: 102%; margin-left: -2px; cursor: default; } .foo tbody tr td { display: block; line-height: 25px; text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .devInfo { max-height: 150px; overflow-y: auto !important; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <body> <div id="leftDiv"> <div id="deviceInfo"> <ul id="menu"> <li>Device Name <ul id="deviceName" style="position: relative;"> <li> item 1 </li> </ul> </li> <li>Interface <ul id="interface" style="position: relative;"> <li> item 2 </li> </ul> </li> </ul> </div> <div id="settingsDiv"> </div> </div> <div id="mainDiv"> </div>

Answer 1

 $(document).mousemove(function(e){ $("#image").css({left:e.pageX, top:e.pageY}); });

 #image{ position:absolute; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="image" src="http://images.pictureshunt.com/pics/m/image.JPG"/>

Answer 2

您需要在放置的克隆元素中定義坐標（例如，使用item.css() 。請參閱下面添加的代碼：

var fooCount = $('.foo').length;
$('#mainDiv').droppable({
  drop: function(event, ui) {
    if (!ui.draggable.hasClass('foo')) {
      var Class = ui.draggable.attr("class");
      var title = ui.draggable.text().trim();
      var item = $('<table class="foo elementTable ' + Class + '" name="' + title + '" id="' + (fooCount + 1) + '"><tr class="tableHeader"><th class="thClass"><button class="settings">set</button>' + title + '<span class="close">x</span></th></tr><tr><td class="add"><span class="addList">Add new link</span></td></tr></table>');
      item.css("left", ui.position.left);  // added
      item.css("top", ui.position.top);  // added
      $(this).append(item);
      fooCount += 1;
      foo();
    }
  }
});

Answer 3

請使用“cursonAt”將可拖動元素像這樣粘貼到鼠標上

$('#interface li').draggable({helper: 'clone', cursorAt: { left: 5,top:5 }});

請閱讀 jQuery 文檔：在此處輸入鏈接描述