Question

我正在尝试构建类似于Twitters的图像裁剪器 - http://jsfiddle.net/yarKr/1/。我坚持的是拖动图像的能力。什么是最好的方法而不诉诸于jquery ui ？

<div class="canvas">
    <span class="window"></span>
    <img src="http://www.dailystab.com/blog/wp-content/uploads/2009/03/katy-perry-esquire-4.jpg" class="draggable" />
</div>

我希望能够在.canvas div中移动图像。

Answer 1

这样的事情可行： jsFiddle

var TheDraggable = null;

$(document).ready(function () {

    $('.draggable').on({
        mousedown: function () { TheDraggable = $(this); },
        mouseup: function () { TheDraggable = null; }
    });

    $(document).mousemove(function (e) {

        if (TheDraggable) {

            TheDraggable.css({'top': e.pageY, 'left': e.pageX});
        }
    });
});

然后为CSS添加：.draggable { position:absolute; }

您可以重写此内容并在重新定位时添加某种形式的缓动，更改光标或根据图片上初始点击的位置添加更精确的起点，但总体而言，这应该可以帮助您开始。

Answer 2

在拖动的同时，将位置设置为绝对值并将其设置为鼠标位置或接近鼠标位置，该怎么样？

Answer 3

这是我的。 http://jsfiddle.net/pd1vojsL/

div中的3个可拖动按钮，拖动受div限制。

<div id="parent" class="parent">
    <button id="button1" class="button">Drag me</button>
    <button id="button2" class="button">Drag me</button>
    <button id="button3" class="button">Drag me</button>
</div>
<div id="log1"></div>
<div id="log2"></div>

需要JQuery（仅限）：

$(function() {
    $('.button').mousedown(function(e) {
        if(e.which===1) {
            var button = $(this);
            var parent_height = button.parent().innerHeight();
            var top = parseInt(button.css('top')); //current top position
            var original_ypos = button.css('top','').position().top; //original ypos (without top)
            button.css({top:top+'px'}); //restore top pos
            var drag_min_ypos = 0-original_ypos;
            var drag_max_ypos = parent_height-original_ypos-button.outerHeight();
            var drag_start_ypos = e.clientY;
            $('#log1').text('mousedown top: '+top+', original_ypos: '+original_ypos);
            $(window).on('mousemove',function(e) {
                //Drag started
                button.addClass('drag');
                var new_top = top+(e.clientY-drag_start_ypos);
                button.css({top:new_top+'px'});
                if(new_top<drag_min_ypos) { button.css({top:drag_min_ypos+'px'}); }
                if(new_top>drag_max_ypos) { button.css({top:drag_max_ypos+'px'}); }
                $('#log2').text('mousemove min: '+drag_min_ypos+', max: '+drag_max_ypos+', new_top: '+new_top);
                //Outdated code below (reason: drag contrains too early)
                /*if(new_top>=drag_min_ypos&&new_top<=drag_max_ypos) {
                    button.css({top:new_top+'px'});
                }*/
            });
            $(window).on('mouseup',function(e) {
                 if(e.which===1) {
                    //Drag finished
                    $('.button').removeClass('drag');
                    $(window).off('mouseup mousemove');
                    $('#log1').text('mouseup');
                    $('#log2').text('');
                 }
            });
        }
    });
});

Answer 4

拖动图标-跳得更少

从弗朗西斯的答案中借用，我不得不即时创建一个可移动的弹出窗口。创建对象后，必须为其添加可拖动性。这并非完美无缺-比缓慢拖动要快得多，光标会留在后面直到您松开，然后<div>会捕捉并坚持光标移动，直到再次单击。

<!-- language: lang-html -->
<input type="button" value="pop" onclick="pop('NN')" id="btnNN"><!-- NN is the query rownumber -->
<b style="display:none;" id="protoContent">
<div id="divdrag~">
    <img style="float:left;" id="drag~">
    my form <input id="inp1_~">...
</div>
</b>

<!-- language: lang-js -->
var TheDraggable = null;
$(document).ready(function () {
    $(document).mousemove(function (e) {
        if (TheDraggable) {
            TheDraggable.css({'top': e.pageY-15, 'left': e.pageX-15});
        }//"-15" gets the cursor back on img inside the <div>
    });
});
var gOpenPop="";
function pop(NN){
    if(gOpenPop!=""){
        document.getElementById("divdrag"+gOpenPop).style.display="none";//hide opened
        if(gOpenPop==NN){
            gOpenPop="";
            return;
        }
    }
    gOpenPop=NN;
    //add div after the button
    $("#btn"+NN).after(
        //get div w/ form, replace of any "~"s with argument NN
        $("#protoContent").html().replace(/~/g,NN)
    );
    //ojb created, now bind click for dragability to the img
    $('#drag'+NN).on(
        {mousedown: function () {TheDraggable = $("#divdrag"+NN); },//
        mouseup: function () { TheDraggable = null; }
    });
    ...
}

在没有jquery ui的情况下使元素可拖动？

4 个答案:

拖动图标-跳得更少