jQuery UI có thể thay đổi kích thước - hướng hoạt động

Question

Làm cách nào để xác định hướng hoạt động thay đổi kích thước? Tôi đã thử googling đó và tìm thấy một vé trên jquery ui, mà nói rằng nó là cố định. Nhưng không có tài liệu về cách sử dụng nó.

Answer 1

Không chắc chắn nếu bạn có nghĩa là bạn muốn để hạn chế các hoạt động thay đổi kích thước để trục cụ thể, hoặc nếu bạn muốn biết những gì hướng thay đổi kích thước thực xảy ra trong.

Câu trả lời của RaYell có hiệu quả nếu bạn muốn sử dụng trước đây. Tôi sẽ thảo luận về sau.

Nếu bạn thiết lập một thay đổi kích thước như thế này:

var r = $("#resizable"); 
r.resizable(); 

Hãy nói rằng bạn muốn biết những gì hướng thay đổi kích cỡ xảy ra ở sau người dùng nhả nút chuột. Hãy liên kết một hàm với sự kiện dừng kích thước lại:

r.bind('resizestop', function(event, ui) { 
    // determine resize deltas 
    var delta_x = ui.size.width - ui.originalSize.width; 
    var delta_y = ui.size.height - ui.originalSize.height; 
} 

Sử dụng đối tượng ui đã qua, chúng tôi có thể xác định kích thước tương đối bằng cách trừ kích thước mới từ kích thước cũ. Sau đó, bạn có thể sử dụng delta_x và delta_y nhưng bạn muốn. Hãy xây dựng một chuỗi tương ứng với một trong các chốt.

r.bind('resizestop', function(event, ui) { 

    // determine resize deltas 
    var delta_x = ui.size.width - ui.originalSize.width; 
    var delta_y = ui.size.height - ui.originalSize.height; 

    // build direction string 
    var dir = ''; 

    if (delta_y > 0) { 
     dir += 's'; 
    } else if (delta_y < 0) { 
     dir += 'n';   
    }  

    if (delta_x > 0) { 
     dir += 'e'; 
    } else if (delta_x < 0) { 
     dir += 'w'; 
    } 

    // do something with this string 
    alert(dir);   
}); 

Lưu ý rằng điều này sẽ không nhất thiết phải trở về mà xử lý đã thực sự sử dụng để thực hiện các thay đổi kích thước nếu bạn có tay cầm trên cả hai mặt của nguyên tố này, chỉ có nó là hướng ròng.

Answer 2

Tôi nghĩ là lựa chọn handles là những gì bạn đang sau:

$(selector).resizable({handles: 'n, s, e, w'}) 

đâu chữ đại diện cho hướng địa lý:

• n - bắc (trên cùng)
• s - nam (dưới)
• e - east (phải)
• w - west (trái)
• ne - đông bắc (trên cùng bên trái)
• se - đông nam (phía dưới bên trái)
• nw - tây bắc (trên cùng bên trái)
• sw - phía tây nam (phía dưới bên trái)

Sử dụng bất kỳ tập hợp con nào ở trên mà bạn thích.

Bạn có thể tìm thấy tài liệu cho tùy chọn đó here

Answer 3

Trong khi bắt đầu, thay đổi kích thước, và dừng callbacks:

$(this).data('resizable').axis 

Answer 4

$(".ui-resizable-handle").live("mousedown", function(e) { 
    $.ui.curResizeDirection = this.className.split("-").pop(); 
    console.log($.ui.curResizeDirection); 
}); 

Answer 5

Tôi biết đây là một câu hỏi từ một thời gian dài trước đây, nhưng các giải pháp đưa ra không giải quyết được vấn đề của tôi. Tôi tìm thấy một cách để có được để xử lý trong chức năng bắt đầu và nó làm việc trong FF và chrome. Tổ chức của tôi không hỗ trợ IE nên nó chưa được kiểm tra, nhưng trong trường hợp này, cách thức FF sẽ hoạt động vì đó là xử lý sự kiện tiêu chuẩn hơn.

$(".resizable").resizable({ 
    start: function (event, ui) { 
     var dir = event.toElement ? event.toElement : event.originalEvent.target; 
    } 
}); 

dir là sau đó xử lý thực tế, bạn sẽ phải tìm thấy những lớp và hướng từ đó (phân tích từ danh sách lớp, nếu tôi đạt được điều đó, tôi sẽ gửi những gì tôi làm). Nó là hữu ích để biết hướng mà trong đó việc thay đổi kích thước đang xảy ra trước khi thay đổi kích thước cho rất nhiều lý do, và tôi thực sự nghĩ rằng jQuery nên có bao gồm một cách để biết xử lý đã được nắm lấy.

Sau đó chỉnh sửa: jQueryUI cung cấp getters cho API của họ, trong trường hợp này để có được danh sách xử lý bạn muốn chỉ làm

var handles = $(".selector").resizable("option", "handles"); 

(mà là trực tiếp từ những con ngựa miệng). Trong trường hợp của tôi, tôi chỉ kiểm tra nếu nó là 'n' hoặc 's' (lên hoặc xuống) và sau đó tính toán thay đổi kích thước trong đối tượng bằng cách lấy kích thước ban đầu trong hàm khởi đầu và sử dụng chức năng thay đổi kích cỡ như vòng lặp để tiếp tục tính toán nó. Nếu kích thước đã giảm hướng đi lên nếu từ tay cầm phía nam và xuống nếu từ tay cầm phía bắc, và nếu nó tăng thì có nghĩa là hướng xuống từ tay cầm phía nam hoặc lên từ tay cầm phía bắc.

Để nhận được nó là 'n' hoặc 'đang được kéo, tôi chỉ lấy dir từ trên và cắt tất cả mọi thứ nhưng lá thư cuối cùng tắt của tên lớp trở lại, vì lớp là một cái gì đó như ui-handle-s.

Nó thực sự khá hài hước vì tôi đã không kết thúc bằng cách sử dụng hầu hết các điều này, kể từ khi tôi thay đổi nó để chỉ thay đổi kích thước từ phía dưới. Vì tôi không sử dụng nó, tôi hy vọng người khác thấy điều này hữu ích.

Answer 6

jsonx đã có một giải pháp tốt nhưng bạn cũng có thể sử dụng được xây dựng trong các sự kiện:

$('#resizable').resizable({ 
    handles: 'n,s', 
    start: function(event, ui) { 
     var handleDirection = event.srcElement.className.split("-").pop(); 
    } 
}); 

Mã này làm cho các yếu tố '#resizable' thay đổi kích thước và đặt tay cầm ở phía bắc và phía nam của nguyên tố này . Nếu tay cầm phía bắc được nhấp và kéo thì handleDirection là 'n'. Tôi không thể tìm được cách tương tự để thực hiện việc này với sự kiện 'dừng'.

Answer 7

Hãy thử mã này:

$("#resizable").resizable({ 
    handles: "n, e, s, w", 
    resize: function(event, ui) { 
     //your codes here 
    } 
}); 

Các div được đổi kích thước trong bốn hướng bằng công xử lý tài sản.

Kiểm tra nó ra ở đây:

http://www.landcoder.com/4-dynamic-interactive-code-snippets-jquery-705#resizable